title: Jquery add and remove DIV tag row based on select value
body: <p>I found this great stackoverflow <a href="https://stackoverflow.com/questions/15130587/jquery-add-or-remove-table-row-based-on-inputs">post</a> that does what I need: add and remove rows based on a select value, but the only difference is that in my case, I don't have a table but blocks of divs. In the table example it works fine, but with divs it fails.<br>
  I've been using the console to try to fix it to no avail. It seems there are problems with the index value and the increment, but I don't undertand why with a table row works but with divs it doesnot. Could anyone take a look?
  Here's a jsfiddle that shows the issue: <a href="http://jsfiddle.net/njes3w1a/1/" rel="nofollow noreferrer">http://jsfiddle.net/njes3w1a/1/</a></p>
  
  <p>This is my script:</p>
  
  <pre><code>if ($('#returnRequest').length) {
  
  var row_i = 0;
  
  function emptyRow() {
      row_i++;
      this.obj = $('&lt;div class="return-row control-group row"&gt;&lt;/div&gt;');
      this.obj.append('&lt;div class="col-md-6"&gt;&lt;label class="control-label"&gt;Serial number&lt;/label&gt;&lt;input type="text" class="form-control" value=""/&gt;&lt;/div&gt;&lt;div class="col-md-4"&gt;&lt;label class="control-label"&gt;Item is&lt;/label&gt;&lt;select class="form-control"&gt;&lt;option value=""&gt;Select&lt;/option&gt;&lt;option value="1"&gt;New and unopened&lt;/option&gt;&lt;option value="2"&gt;Defective&lt;/option&gt;&lt;/select&gt;&lt;/div&gt;');
  }
  
  function refresh(new_count) {
      //how many applications we have drawed now ?
      console.log("New count= " + new_count);
      if (new_count &gt; 0) {
          $("#noa_header").show();
      } else {
          $("#noa_header").hide();
      }
      var old_count = parseInt($('#productRowWrapper').children().length);
      console.log("Old count= " + old_count);
      //the difference, we need to add or remove ?
      var rows_difference = parseInt(new_count) - old_count;
      console.log("Rows diff= " + rows_difference);
      //if we have rows to add
      if (rows_difference &gt; 0) {
          console.log('enetered a');
          for (var i = 0; i &lt; rows_difference; i++)
          $('#productRowWrapper').append((new emptyRow()).obj);
      } else if (rows_difference &lt; 0) //we need to remove rows ..
      {
          console.log('enetered b');
          var index_start = old_count + rows_difference + 1;
          console.log("Index start= " + index_start);
          $('.return-row:gt(' + index_start + ')').remove();
          console.log(row_i);
          console.log(rows_difference);
          row_i += rows_difference;
          console.log(row_i);
      }
  }
  
  $('#quantityReturn').change(function () {
      refresh($(this).val());
  });
  }
  </code></pre>