Modal is not showing and can't close

Question

So I am trying to add the search function and the scrollable table in the bootstrap modal I have. At the moment, I have made 1 modal to work with the functions and it is showing good results.

But then the other modals of the same page does not seem to load when I click the button for the modal. I did not added any extra codes for these or assigned any new classes or ids.

As shown in the first image, the modal wont show and I am unable to go back the main page. Whilst the second image shows the modal with working functionality.

This is the code for the Medical Plan Modal

    <div class="modal fade" id="medicPlanModal" tabindex="-1" role="dialog" aria-labelledby="medicPlanModalLabel"
  aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content modal-container">
      <div class="modal-header">
        <h5 class="modal-title" id="medicPlanModalLabel">Add medical plan</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <form action="/postMedicalPlan" method="POST">
        <div class="modal-body">
          <div class="form-group">
            <label for="medicalPlanName" class="col-form-label">Medical Plan:</label>
            <input type="text" class="form-control" name="medicalPlanName"></input>
          </div>
          <div class="form-group">
            <label class="col-form-label">Medical Card:</label>
            <p>Front</p>
            <input type="file" name="medicalCardFront">
          </div>
          <div class="form-group">
            <p>Back</p>
            <input type="file" name="medicalCardBack">
          </div>
          <div>
            <label for="userid" class="col-form-label">Available for:</label>

            <div class="modal-search-group">

              <i class="fa2 fa-search" aria-hidden="true"></i>
              <input type="search" class="form-control rounded " placeholder="Search" aria-label="Search"
                aria-describedby="search-addon" id="search_mp_add" />


            </div>

            <div class="modal-table-fix">

              <table class="modal-table">
                <thread class="thread-inverse">
                  <thead>
                    <tr>
                      <th>Name</th>
                      <th>Email</th>
                      <th>Contact</th>
                      <th>Action</th>
                    </tr>
                  </thead>
                  <tbody id="table_body_mpadd">
                    <% for(var i=0; i < data.employee.length; i++) { %>
                      <tr>
                        <td>
                          <%= data.employee[i].name %>
                        </td>
                        <td>
                          <%= data.employee[i].email %>
                        </td>
                        <td>
                          <%= data.employee[i].contact %>
                        </td>
                        <td><input type="checkbox" class="checkbox" name="userid" value=<%=data.employee[i]._id %>> |
                          ADD
                        </td>
                      </tr>
                      <% } %>
                  </tbody>
                </thread>
              </table>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="submit" class="btn btn-primary">Submit</button>
          </div>
      </form>
    </div>
  </div>
</div>

And this is the code for Clinic List

<div class="modal fade" id="clinicModal" tabindex="-1" role="dialog" aria-labelledby="clinicModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
  <div class="modal-content">
    <div class="modal-header">
      <h5 class="modal-title" id="clinicModalLabel">Add clinic</h5>
      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <form action="/postClinic" method="POST">
    <div class="modal-body">
        <div>
          <label for="clinicName" class="col-form-label">Clinic name:</label>
          <input type="text" class="form-control" name="clinicName"></input>
        </div>
        <div>
          <label for="latitude" class="col-form-label">Latitude:</label>
          <input type="text" class="form-control" name="latitude"></input>
        </div>
        <div>
          <label for="longitude" class="col-form-label">Longitude:</label>
          <input type="text" class="form-control" name="longitude"></input>
        </div>
          <div>
            <label for="userid" class="col-form-label">Available for:</label>
            <table>
              <thread class = "thread-inverse">
            <thead>
              <tr>
                <th>Name</th>
                <th>Email</th>
                <th>Contact</th>
                <th>Action</th>
              </tr>
            </thead>
            <tbody>
              <% for(var i=0; i < data.employee.length; i++) { %>
                <tr>
                  <td><%= data.employee[i].name %></td>
                  <td><%= data.employee[i].email %></td>
                  <td><%= data.employee[i].contact %></td>
                  <td><input type="checkbox" class="checkbox" name="userid" value=<%= data.employee[i]._id %>> | ADD </td>
                </tr>
             <% } %>
            </tbody>
          </thread>
          </table>
          </div>
      </div>
        <div class="modal-footer">
      <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      <button type="submit" class="btn btn-primary">Submit</button>
        </div>  
      </form>
  </div>
</div>

js code

   function setSearch(inputEle, rowEle){
     $(inputEle).keyup(function(){  
          search_table(rowEle, $(this).val());  
     }); 
  } 
  
  function search_table(rowEle, value){  
      $(rowEle).each(function(){  
           var found = 'false';  
           $(this).each(function(){  
               if($(this).text().toLowerCase().indexOf(value.toLowerCase()) >= 0)  
               {  
                         found = 'true';  
               }  
           });  
           if(found == 'true')  
           {  
                $(this).show();  
           }  
           else  
           {  
                $(this).hide();  
           }  
      });  
   }  
   setSearch('#search_home', '#table_body_home tr');
   setSearch('#search_p', '#table_body_p tr');
   setSearch('#search_pi', '#table_body_pi tr');
   setSearch('#search_atnd', '#table_body_atnd tr');
   setSearch('#search_benefit', '#table_body_benefit tr');
   setSearch('#search_cal_leave', '#table_body_cal_leave tr');
   setSearch('#search_cal_lr', '#table_body_cal_lr tr');
   setSearch('#search_cal_act', '#table_body_cal_act tr');
   setSearch('#search_contract', '#table_body_contract tr');
   setSearch('#search_parties', '#table_body_parties tr');
   setSearch('#search_rewards', '#table_body_rewards tr');
   setSearch('#search_rewards_add', '#table_body_re_add tr');
   setSearch('#search_medplan', '#table_body_medplan tr');
   setSearch('#search_medrec', '#table_body_medrec tr');
   setSearch('#search_clist', '#table_body_clist tr');
   setSearch('#search_insurance', '#table_body_ins tr');
   setSearch('#search_mp_add', '#table_body_mpadd tr');
   setSearch('#search_clist_add', '#table_body_clistadd tr');

css

    .modal-container {
  width: 120%;
}

.modal-table-fix {
  overflow-y: auto;
  overflow-x: hidden;
  height: 160px;
}
.modal-table-fix thead th {
  position: sticky;
  top: 0;
  background: rgb(255, 255, 255);
  padding: 0 0 10px 1px;
}

/* Borders (if you need them) */
.tableFixHead,
.tableFixHead td {
  box-shadow: inset 1px -1px rgb(255, 255, 255);
}
.tableFixHead th {
  box-shadow: inset 1px 1px rgb(255, 255, 255), 0 1px rgb(255, 255, 255);
}

.modal-table tbody td {
  padding: 5px;
}

.modal-search-group {
  width: 40%;
  display: -ms-flexbox;
  display: flex;
  margin: 0px 0 10px 0;
}

.fa2 {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  color: black;
  padding: 10px;
  text-align: center;
}

Answer 1

As https://stackoverflow.com/users/13926890/mohit-jain mentioned you need to do this inside your js file, whenever you are invoking your modal either for closing or for opening it.

  function search_table(rowEle, value){  
      $(rowEle).each(function(){  
           var found = 'false';  
           $(this).each(function(){  
               if($(this).text().toLowerCase().indexOf(value.toLowerCase()) >= 0)  
               {  
                         found = 'true';  
               }  
           });  
           if(found == 'true')  
           {  
                $('#yourIdHere').modal({show:true}); 
                //in case it doesn't work, use this   
                // $('#yourIdHere').modal('show');

           }  
           else  
           {  
                $('#yourIdHere').modal({show:false});
                 //in case it doesn't work, use this  
                //$('#yourIdHere').modal('hide');
           }  
      });  
   }