Help With Multiple Dialog Search Modals on one page.

Help With Multiple Dialog Search Modals on one page.

  1. <!-- PROGRAM MANAGER MODAL AND SCRIPT -->
    <div id="dialogSearch" title="Search Project Managers">
     <input class="form-control input-sm" type="text" id="progManagerModal" />
     <div class="input-group-addon"><a href="#" id="progManagerModalSearch">
      <span class="glyphicon glyphicon-search"></span></a>
     </div>
     <div id="managerList">
      <table id="managerGrid"></table>
     </div>
    </div>
  2. <!-- CURRENT PRODUCT MODAL AND SCRIPT -->
    <div id="dialogSearch" title="Search Current Products">
     <input class="form-control input-sm" type="text" id="curProdModal" />
     <div class="input-group-addon"><a href="#" id="curProdModalSearch">
      <span class="glyphicon glyphicon-search"></span></a>
     </div>
     <div id="productList">
      <table id="productGrid"></table>
     </div>
    </div>
  3. <!-- EXISTING TEAM MODAL AND SCRIPT -->
    <div id="dialogSearch" title="Search Existing Teams">
     <form>
      <input class="form-control input-sm" type="text" id="existingTeamModal" />
      <div class="input-group-addon"><a href="#" id="existingTeamModalSearch">
       <span class="glyphicon glyphicon-search"></span></a>
      </div>
      <div id="teamList">
       <table id="teamGrid"></table>
      </div>
     </form> 
    </div>

  4. <script>
     jQuery(function ($) {
      $("#searchClick").each(function() {
       $.data(this, 'dialog',
        $(this).next('#dialogSearch').dialog({
         autoOpen: false,
         modal: true,
         width: 300,
         show: { effect: "fold", duration: 500},
         hide: { effect: "fold", duration: 500},
         buttons: [
          {
           text: "Close",
           click: function () { $(this).dialog('close');}
          }
         ]
        })
       ); 
      }).click(function() {
       $.data(this, 'dialog').dialog('open');
       return false;
      });
     });
    </script>

These dialogs should open from:

  1. <div class="input-group ">
           <input class="form-control input-sm highlight " type="text" id="programManager">
           <div class="input-group-addon"><a href="#" data-toggle="modal" data-target="dialog-progManagerDialog" id="searchClick"">
            <span class="glyphicon glyphicon-search"></span></a>
           </div>
          </div> 
  2. <div class="input-group ">
           <input class="form-control input-sm highlight " type="text" id="currentProduct">
           <div class="input-group-addon"><a href="#" data-toggle="modal" data-target="dialog-curProdDialog" id="searchClick">
            <span class="glyphicon glyphicon-search"></span></a>
           </div>
        </div> 
  3.  <div class="input-group ">
           <input class="form-control input-sm highlight " type="text" id="existingTeam">
           <div class="input-group-addon"><a href="#" data-toggle="modal" data-target="dialog-existingTeamDialog" id="searchClick" >
            <span class="glyphicon glyphicon-search"></span></a>
           </div>
          </div> 
      </div>   


However, nothing seems to work at all.


Basically I have 3 different search modals which should pop. One for Existing Teams. One for Products. One for Program Managers.

The 3 modals will perform different searches and generate different results, but they will look very similar.


What am I missing?