I have created a form and JQuery Ajax handler to handle the login.
Under my form I have created a bootstrap div popup that tells "Username or password incoorrect". I want to hide it using JQuery $().hide() and my Handler script will show the div popup if the username and password are not in the database.

This is the div popup

<div id="error" class=" col-sm-3  mx-auto  mt-4 alert alert-danger alert-dismissible fade show" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
  Password or username incorrect.
</div>

This is my JS Script

$(`div#error`).hide();
//handling login form.
$("#login-form").submit(function(e){
    if($('#user').val() != "" && $('#psw').val() != "" && $('#npsw').val() != "") {
        $.ajax({
           type: "POST",
           url: "login-process.php",
           data: $("#login-form").serialize(),
           success: function(response){
               $('#login-form')[0].reset();
               console.log(response);
               if (response == "True") {
                   window.location.href = "info.php";
               }
               else {
                       $(`div#error`).show();
               }
           }
         });
     }
     else {
         alert("Please fill the fields.")
     }
    e.preventDefault();
});

The problem: The div popup is showing on the page and it's not hidden. When I close it manually from the close button. Handler is not showing the div if the data is incorrect.