Javascript function only works on the first row only inside my modal

Question

I am using a javascript function for input verification where it is being used inside a modal. I click the edit button at the first row, javascript functions work well. But when I click on the edit button on the second row, and succeeding rows, it doesn't function.

I am not really sure if the problem is the data inside the modal or the data outside the modal

I tried adding a class name in the input fields and changing the calling function in javascript from "#name" to ".name" but it did not work.

I also tried the shown.bs function

// Here is my code for the table (partial)

    <?php
    if ($result = mysqli_query($conn, $sql_accounts)) {
    while ($row=mysqli_fetch_array($result)) {
    ?>
    <tr>
    <form action="update.php" method="POST">
    <td>
    <?php echo $row["username"]; ?> </td>
    <td>
    <?php echo $row["firstname"]; ?> </td>
    <td> .....
    <td>
    <?php echo $row["status"]; ?> </td>
    <td>
    <?php
    if ($row["status"] == "Deactivated") {
    ?>
    <a href="update.php?activate=<?php echo $row['accountid']; ?>" class="btn btn-info"> Activate </a>
    <?php
    } elseif ($row["status"] == "Active") {
    ?>
    <a href="update.php?deactivate=<?php echo $row['accountid']; ?>" class="btn btn-warning"> Deactivate </a>
    <?php
    } ?>
    <a href="#edit<?php echo $row['accountid']; ?>" data-toggle="modal" class="btn btn-success" data-toggle="modal">Edit</a>

// Here is my code for the modal (partial)

    <div id="edit<?php echo $row['accountid']; ?>" class="modal fade" role="dialog">
    <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
    <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times;</button>
    <h4 class="modal-title">Edit Account</h4>
    </div>
    <div class="modal-body">
    <form method="POST" action="editaccount.php">
    <div class="form-group">
    <input type="hidden" name="edit_item_id" value="<?php echo $row['accountid']; ?>">
    <label>Username</label>
    <span id="popover-username" class="pun hide pull-right block-help"><i class="fa fa-info-circle text-danger" aria-hidden="true"></i> Username must not contain any special characters</span>
    <input type="text" id="username" name="username" class="username form-control" value="<?php echo $row['username']; ?>" placeholder="Enter Username">

//Here is my javascript function

    <script>
        $(document).ready(function() {

            $('#password').keyup(function() {
                var password = $('#password').val();
                if (checkStrength(password) == false) {
                    $("#submit").attr('disabled', 'disabled');
                }
            });

            $('#confirm_password').blur(function() {
                if ($('#password').val() !== $('#confirm_password').val()) {
                    $('#popover-cpassword').removeClass('hide');
                    $("#submit").attr('disabled', 'disabled');
                } else {
                    $('#popover-cpassword').addClass('hide');
                    $("#submit").removeAttr('disabled');
                }
            });

            $('#username').blur(function() {
                var regex = /\`|\~|\!|\@|\#|\$|\%|\^|\&|\*|\(|\)|\+|\=|\[|\{|\]|\}|\||\\|\'|\<|\,|\.|\>|\?|\/|\""|\;|\:|\s/;
                if ($('#username').val().match(regex)) {
                    $('#popover-username').removeClass('hide');
                    $("#submit").attr('disabled', 'disabled');
                } else {
                    $('#popover-username').addClass('hide');
                    $('#sign-up').attr('disabled', false);
                    $("#submit").removeAttr('disabled');
                }
            })

            $('#contact_number').blur(function() {
                var regex = /^[(9)][(\d+)]{9}$/;
                if ($('#contact_number').val().match(regex)) {
                    $('#popover-cnumber').addClass('hide');
                    $("#submit").removeAttr('disabled');
                } else {
                    $('#popover-cnumber').removeClass('hide');                        
                    $("#submit").attr('disabled', 'disabled');
                }
            });

            $('#password').keyup(function() {
                var password = $('#password').val();
                if (checkStrength(password) == false) {
                    $("#submit").attr('disabled', 'disabled');
                }
            });

A message should come out once an input is wrong, like for example I input # in the username field there should be a message user name must containany special character where the javascript function removes the class hide from the span code in the modal

Answer 1

As I mentioned above you should use class selector and also I slightly improved your validations

$('.password').keyup(function() {
  $("#submit").prop('disabled', checkStrength($(this).val()) === false);
});

$('.confirm_password').blur(function() {
  var arePasswordTheSame = $('.password').val() !== $(this).val();
  $('.popover-cpassword').toggleClass('hide', !arePasswordTheSame);
  $("#submit").prop('disabled', !arePasswordTheSame)
});

$('.username').blur(function() {
  var regex = /\`|\~|\!|\@|\#|\$|\%|\^|\&|\*|\(|\)|\+|\=|\[|\{|\]|\}|\||\\|\'|\<|\,|\.|\>|\?|\/|\""|\;|\:|\s/;
  var isUserNameCorrect = $(this).val().match(regex);
  $('.popover-username').toggleClass('hide', !isUserNameCorrect);
  $(".submit").prop('disabled', !isUserNameCorrect);
  $('.sign-up').prop('disabled', !isUserNameCorrect);
})

$('.contact_number').blur(function() {
  var regex = /^[(9)][(\d+)]{9}$/;
  var isNumberCorrect = $(this).val().match(regex)
  $('.popover-cnumber').toggleClass('hide', !isNumberCorrect);
  $(".submit").prop('disabled', !isNumberCorrect);
});

Also you will need to add your current container to all class seelctors. For more info please reference API