title: Reset name attribute array indexes, dynamically add remove rows
body: <p>I have to post data via ajax and need the name attribute array indexes to reset.</p>
  
  <p>For example:</p>
  
  <p>1st row:</p>
  
  <pre><code>&lt;select data-placeholder="Colours" class="colours chosen-select" 
  multiple tabindex="4" name="colours[0][]"&gt;
  &lt;option value=""&gt;Red&lt;/option&gt;
  &lt;option value=""&gt;Orange&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>2nd Row dynamically added:</p>
  
  <pre><code>&lt;select data-placeholder="Colours" class="colours chosen-select" 
  multiple tabindex="4" name="colours[1][]"&gt;
  &lt;option value=""&gt;Red&lt;/option&gt;
  &lt;option value=""&gt;Orange&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>The name colours array must increment by 1 everytime I add, as well as reset the values when I remove.</p>
  
  <p>I have looked around but not found any solution.</p>
  
  <p>Here is what I have:</p>
  
  <p>Adding:</p>
  
  <pre><code>var tbl = $("#service");
  $("#addRowBtn").click(function () {
  var count = $('#rowCount tr').length;   
  
  $("&lt;tr&gt;" +    
  "&lt;td&gt;" +
  "&lt;select data-placeholder=\"Colours\" class=\"colours chosen-select\" 
  multiple tabindex=\"4\"\ name=\"colours[" +
  count +
  "][]\"&gt;" +
  "&lt;option value=\"\"&gt;Red&lt;/option&gt;" +
  "&lt;option value=\"\"&gt;Orange&lt;/option&gt;" +
  "&lt;/select&gt;&lt;/td&gt;" +
  "&lt;td&gt;&lt;i style=\"color:#d64830\" class=\"delRowBtn fa fa-minus- 
  circle\"&gt;&lt;/i&gt;&lt;/td&gt;&lt;/tr&gt;").appendTo(tbl);
  </code></pre>
  
  <p>Deleting a  row:</p>
  
  <pre><code>$(document.body).delegate(".delRowBtn", "click", function () {
  
    $(this).closest("tr").remove();
   });
  </code></pre>
  
  <p>I have added var count to increment the indexes, but I'm not able to reset the values when removing.</p>
  
  <p>Please help!</p>