Javascript add class to classList don't add. Used in Django web development framework

We have a form in which we want all input areas with faulty submitted data to gain red borders. This is done by setting the class of the input tag to "form-control-danger" in addition to the original class "form-control". The HTML/JS/Django code looks like this, and it is mostly correct. I have controlled that the scripts tags are only generated and run when faulty data is submitted.

<!-- Output all fields -->
 

As we feed the form faulty data this gives us this source code.

<div class="input-group form-group-no-border">
    <span class="input-group-addon">
        <i class="now-ui-icons



             ui-1_lock-circle-open
        "></i>
    </span>
    <input type="password" name="password2" value="iuhqeifuhweifuhweifuwefw" id="id_password2" required placeholder="Password again..." class="form-control" />

    <!-- Give input box red border if data is not valid -->

        <script>
            alert("Before");
            var element = document.getElementById("id_password2");
            element.classList.add("form-control-danger");
            alert("Done");
        </script>

</div>

Observe that the class of the input tag with id of "id_password2" is unchanged, despite the javascript seeming correct, my javascript skills could however be considered questionable. All help is appreciated.

Merry Christmas