title: Add values to select field dynamically
body: <p>I am trying to add values to a select field dynamically if there not listed. I have dynamic fields generated through jquery. I am populating these select field values through mysql fetch query from table <code>courses_selection_list</code>.  Each select field generated has three options. I have a hidden div show only if option <code>Other – Not listed</code> is selected. The input in the hidden div shows a unique id number value I pull from an ajax call. I am now having difficulties trying to increment the value by one every time <code>Other – Not listed</code> is selected in different select fields. How can I increment this intial value by one? <a href="http://webprolearner.ueuo.com/test/courses_stat.php" rel="nofollow">DEMO</a> or <a href="http://jsfiddle.net/QUKwL/17/" rel="nofollow">Fiddle</a></p>
  
  <pre><code>&lt;script"&gt;
  $(document).ready(function () {
  $('select').change(function() {
  var option = $(this).val();
  showFields(option);
  return false;
      });
  
  var $increment_num = $('#course_increment_num');
  var interval = 1000;  //3000 = 3 seconds
  function getCourseId() {
      $.ajax({
          type: 'POST',
          url: 'courseAutoIncrement.php',
          data: $(this).serialize(),
          dataType: 'json',
          success: function (data) {
              var $cloned = $('#course_catalog');    
              var num = parseInt(data);
              $increment_num.val(num);
  
              $cloned.each(function(i){
                  var $this = $(this);
                  $this.find('[name^="new_course_"]').first().val(num+i);
              })
          },
          complete: function (data) {
              // Schedule the next
              setTimeout(getCourseId, interval);
          }
      });
  }
  
  setTimeout(getCourseId, interval);
  
  function showFields(option){ 
  
      var content = '';
      for (var i = 1; i &lt;= option; i++){
          content += '&lt;div id="course_'+i+'"&gt;&lt;label&gt;Course # '+i+'&lt;/label&gt;&lt;br /&gt;&lt;label&gt;Course Name:&lt;/label&gt; &lt;select id="coursename_'+i+'" name="coursename_'+i+'" class="course_list"&gt;&lt;option value="" &gt;--- Select ---&lt;/option&gt;"'
                  &lt;?php
                      $course_query = $db_con-&gt;prepare("SELECT course_id, course_name FROM courses_selection_list ");
                      $course_query-&gt;execute();
                      $data = $course_query-&gt;fetchAll();
                      foreach ($data as $row){
                              //dropdown values pulled from database
                         echo 'content += \'&lt;option value="' . $row['course_id'] .'"&gt;' . $row['course_name'] . '&lt;/option&gt;\';';
                      }
  
                  ?&gt;
          '"';                   
  
      content += '&lt;/select&gt;&lt;div class="hideNewCourse" style="display:none;"&gt;Course ID&lt;input type="text" id="new_course_'+i+'" name="new_course_'+i+'"/&gt;&lt;label for="newCourse_'+i+'"&gt;Add Course Name to List:&lt;/label&gt;&lt;input type="text" id="newCourse_'+i+'" name="newCourse_'+i+'"/&gt;&lt;/div&gt;&lt;/div&gt;';
      }
  
    $(document).on('change', "[id^=coursename_]", function () {
          var $this = $(this);
          if ($this.val() == "3") {
             $(this).closest('div').find(".hideNewCourse").show();
          } else {
              $(this).closest('div').find(".hideNewCourse").hide();
          }
      });
  
      $('#course_catalog').html(content);
  }
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>Increment By: &lt;input type="text" id="course_increment_num" value="" readonly&gt;&lt;/br&gt;
  &lt;strong&gt;How many courses offered?&lt;/strong&gt;
  &lt;select name="courses_offered" id="courses_offered"&gt;
  &lt;option value="default"&gt;---Select---&lt;/option&gt;
              &lt;option value="1"&gt;1&lt;/option&gt;
              &lt;option value="2"&gt;2&lt;/option&gt;
              &lt;option value="3"&gt;3&lt;/option&gt;
  &lt;/select&gt;
  &lt;div id="course_catalog"&gt;&lt;/div&gt;
  </code></pre>