I am framing a dynamic html where I am trying to load modal based on the dynamic click. Also the modal is by default not getting hidden. Fiddle for the same https://jsfiddle.net/DorababuMeka/n29vuqwL/

$("#crewCount").change(function() {
  var count = $('#crewCount :selected').val();
  //alert(count);
  var CrewDivCount = $(".CrewRow").length;
  for (i = 1; i <= count; i  ) {
    bindDynCrew(i);
  }
});

function bindDynCrew(itemID) {
  var html = '<button type="button"  data-toggle="modal" data-target='   "Crew"   itemID   '>Open Modal</button>';
  html  = '<div  role="dialog" id='  "Crew"   itemID  '>';
  html  = '<div >';
  html  = '<div >';
  html  = '<div >';
  html  = '<button type="button"  data-dismiss="modal">&times;</button>';
  html  = '<h4 >Modal Header</h4>';
  html  = '</div>'

  html  = '</div>'
  html  = '</div>'
  html  = '</div>'
  $("#divCrew").append(html);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->
<select  id="crewCount">
  <option value="-1">Select Crew Count</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
  <option value="10">10</option>
  <option value="11">11</option>
  <option value="12">12</option>
  <option value="13">13</option>
  <option value="14">14</option>
  <option value="15">15</option>
  <option value="16">16</option>
  <option value="17">17</option>
  <option value="18">18</option>
  <option value="19">19</option>
  <option value="20">20</option>
  <option value="21">21</option>
  <option value="22">22</option>
  <option value="23">23</option>
  <option value="24">24</option>
  <option value="25">25</option>
  <option value="26">26</option>
  <option value="27">27</option>
  <option value="28">28</option>
  <option value="29">29</option>
  <option value="30">30</option>
</select>
<br/>
<br/>
<div >
  <div id="divCrew">

  </div>
</div>

CodePudding user response：

Just replace

data-target='   "Crew"   itemID   ' to data-target='   "#Crew"   itemID   '