title: My script is not working in my table edit modal
body: <p>This is my code for modal inside of data tables this modal is for edit but my script only works at first row but if i want to edit the second row the script is not working.</p>
  
  <pre><code>&lt;div class="form-group"&gt;
          &lt;label for="leave_type"&gt;Type of Leave:&lt;/label&gt;
          &lt;select class="form-control mylist1" id="mylist1" name="leave_type"&gt;
              &lt;option value="Vacation Leave"&gt;Vacation Leave&lt;/option&gt;
              &lt;option value="Maternity Leave" &gt;Maternity Leave&lt;/option&gt;
              &lt;option value="Sick Leave" &gt;Sick Leave&lt;/option&gt;
              &lt;option value="Paternity Leave" &gt;Paternity Leave&lt;/option&gt;
              &lt;option value="Leave Without Pay" &gt;Leave Without Pay&lt;/option&gt;
              &lt;option value="Authorized Absence" &gt;Authorized Absence&lt;/option&gt;
              &lt;option value="Unauthorized Absence" &gt;Unauthorized Absence&lt;/option&gt;
              &lt;option value="Other"&gt;Other&lt;/option&gt;
          &lt;/select&gt;
      &lt;/div&gt;
  
      &lt;div class="form-group"&gt;
          &lt;div id="forshow1" class="forshow1"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>And my script</p>
  
  <pre><code>  &lt;script&gt;
       $('#mylist1').change(function(){
          if( $(this).val() == 'Other'){
              $('#forshow1').append('&lt;input type="text" name="other" class="form- 
              control" id="myInput1" /&gt;');
          }else{
              $('#myInput1').remove();
          }
      });
   &lt;/script&gt;
  </code></pre>