title: Javascript - Add more button function with 2 Dynamic Select Tags
body: <p>I have 2 Select Boxes (Class &amp; Section). When I select a class, the 2nd Select box gets the dynamic list of related Sections from another file through AJAX. It is working well. I added (Add More Class Btn) with JS function which creates the same 2 select boxes (Class &amp; Section). After selecting the Class, I'm not able to get the related Sections because of same id.</p>
  
  <p>Here is my <strong>PHP</strong> Code:</p>
  
  <pre><code>        &lt;?php
              include('dbConfig.php');
              $query = $db-&gt;query("SELECT * FROM classes ");
              $rowCount = $query-&gt;num_rows;
          ?&gt;
  
          &lt;div class="input_fields_wrap"&gt;
              &lt;button class="add_field_button btn btn-sm btn-primary"&gt;Add More Classes&lt;/button&gt;&lt;br&gt;&lt;br&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-md-6"&gt;
                      &lt;label&gt;Class&lt;/label&gt;
                      &lt;select name="class[]" id="class" class="form-control" style="width:150px;" required &gt;
                          &lt;option value=""&gt;Select Class&lt;/option&gt;
                          &lt;?php
                          if($rowCount &gt; 0){
                              while($row = $query-&gt;fetch_assoc()){ 
                                  echo '&lt;option value="'.$row['id'].'"&gt;'.$row['class'].'&lt;/option&gt;';
                              }
                          }else{
                              echo '&lt;option value=""&gt;No Class Available&lt;/option&gt;';
                          }
                          ?&gt;
                      &lt;/select&gt;&lt;br&gt;
                  &lt;/div&gt;
  
                  &lt;div class="col-md-6"&gt;
                      &lt;label&gt;Section&lt;/label&gt;
                      &lt;select id="section" name="section[]" class="form-control" style="width:150px;" required &gt;
                      &lt;option value=""&gt;Select Class first&lt;/option&gt;
                      &lt;/select&gt;
                  &lt;/div&gt;
              &lt;/div&gt;&lt;br&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>Here is my <strong>JS</strong> Code:</p>
  
  <pre><code>&lt;script&gt;
    $(document).ready(function() {
      var max_fields      = 10; //maximum input boxes allowed
      var wrapper         = $(".input_fields_wrap"); //Fields wrapper
      var add_button      = $(".add_field_button"); //Add button ID
  
      var x = 0; //initlal text box count
      $(add_button).click(function(e){ //on add input button click
          e.preventDefault();
          if(x &lt; max_fields){ //max input box allowed
              x++; //text box increment
              $(wrapper).append(
              '&lt;div class="row"&gt;&lt;div class="col-md-6"&gt;&lt;label&gt;Class&lt;/label&gt;&lt;select name="class[]" id="class" class="form-control" style="width:150px;" required &gt;&lt;option value=""&gt;Select Class&lt;/option&gt;&lt;?php $query = $db-&gt;query("SELECT * FROM classes "); $rowCount = $query-&gt;num_rows;
                      if($rowCount &gt; 0){
                          while($row = $query-&gt;fetch_assoc()){ 
                              echo '&lt;option value="'.$row['id'].'"&gt;'.$row['class'].'&lt;/option&gt;';
                          }
                      }else{
                          echo '&lt;option value=""&gt;No Class Available&lt;/option&gt;';
                      }
                      ?&gt;
                  &lt;/select&gt;&lt;/div&gt;&lt;div class="col-md-6"&gt;&lt;label&gt;Section&lt;/label&gt;&lt;select id="section" name="section[]" class="form-control" style="width:150px;" required &gt;&lt;option value=""&gt;Select Class first&lt;/option&gt;&lt;/select&gt;&lt;/div&gt;&lt;a href="#" class="remove_field"&gt;Remove&lt;/a&gt;&lt;/div&gt;&lt;br&gt;'); //add box
          }
      });
  
      $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
          e.preventDefault(); $(this).parent('div').remove(); x--;
      })
  });
  &lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
      $(document).ready(function(){
          $('#class').on('change',function(){
              var Class = $(this).val();
              if(Class){
                  $.ajax({
                      type:'POST',
                      url:'get_sections.php',
                      data:'id='+Class,
                      success:function(html){
                          $('#section').html(html);
                      }
                  }); 
              }else{
                  $('#section').html('&lt;option value=""&gt;Select Class first&lt;/option&gt;');
              }
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>Here is my <strong>get_sections.php</strong> Code:</p>
  
  <pre><code>include('dbConfig.php');
  
  if (isset($_POST["id"]) &amp;&amp; !empty($_POST["id"])){
    //Get all Section Data
    $query = $db-&gt;query("SELECT * FROM sections WHERE class_id = ".$_POST['id']." ORDER BY section ASC");
  
    //Count total number of rows
    $rowCount = $query-&gt;num_rows;
  
    //Display Section list
    if($rowCount &gt; 0){
      echo '&lt;option value=""&gt;Select Section&lt;/option&gt;';
      while($row = $query-&gt;fetch_assoc()){ 
        echo '&lt;option value="'.$row['id'].'"&gt;'.$row['section'].'&lt;/option&gt;';
      }
    }else{
      echo '&lt;option value=""&gt;No Section Available&lt;/option&gt;';
    }
  }
  </code></pre>
  
  <p>Help me please with the fetching of JS generated Selected Class Sections.</p>