title: jQuery Change number inside name attribute on cloned row with multiple inputs
body: <p>I have a form row with 26 inputs on it, some text some select boxes. I have a button that clones the top row, adds an increment to the row number. However i'm struggling to work out how to increment the name and ID of the cloned field elements. </p>
  
  <p>Form:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;tr id="CmasterRow" class="DB1_ROW"&gt;
                                                  &lt;td&gt;&lt;span id="cnumber"&gt; &lt;input type="text" size="2" readonly class="form-control" id="DB1[0][A]" name="DB1[0][A]"  data-circuitNumber="0" data-EN="0"  value="0"&gt;&lt;/span&gt;&lt;/td&gt;
                                                  &lt;td&gt;    
                                                      &lt;div class="input-group"&gt;                     
                                                          &lt;input type="text" class="form-control" id="DB1[0][B]" name="DB1[0][B]" data-EN="1"&gt;
                                                          
                                                      &lt;/div&gt;
                                                  &lt;/td&gt;                                       
                                                  &lt;td&gt;    
                                                      &lt;div class="input-group"&gt;                     
                                                          &lt;input type="text" class="form-control" id="DB1[0][C]"   size="2" name="DB1[0][C]" data-EN="2"&gt;
                                                         
                                                      &lt;/div&gt;
                                                  &lt;/td&gt;                                       
                                                  &lt;td&gt;    
  
                                                      &lt;input type="text" class="form-control" id="DB1[0][D]" size="4"  name="DB1[0][D]" data-EN="3"&gt;
  
                                                  &lt;/td&gt;                                  
                                                  &lt;td&gt;    
                                                      &lt;div class="input-group"&gt;                     
                                                          &lt;input type="text" class="form-control" id="DB1[0][E]" size="3"  name="DB1[0][E]" data-EN="4"&gt;
  
                                                      &lt;/div&gt;
                                                  &lt;/td&gt;   
  &lt;!-- ... etc ... etc ... --&gt;
                                                           
  &lt;/tr&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here's the javascript I have at the moment (the working on that clones the row)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>        var template = $('#CmasterRow'),
          $("#addrow").click(function () {
              var row = template.clone();
              var n = $("[data-circuitNumber]").length;
              row.find('input').val('');
              row.find('[data-circuitNumber]').val(n);
              
              row.find('input').attr('name').replace(/\[([0-9]+)\]/g,"[" + n + "]");
              row.find('input').attr('id').replace(/\[([0-9]+)\]/g,"[" + n + "]");
              
              
              row.insertBefore($('#disBoard tbody&gt;tr:last').eq(-1));
              // saveData(); - own function not needed for this issue.
              
             
              return false;
  
              /* Version 1 simple row clone
               var row = $('#disBoard tbody&gt;tr:first').clone(true);
               var n = $("[data-circuitNumber]").length;
               row.find('input').val('');
               row.find('[data-circuitNumber]').val(n);
               row.insertBefore($('#disBoard tbody&gt;tr:last').eq(-1));
               saveData();
               return false;
               */
          });</code></pre>
  </div>
  </div>
  </p>
  
  <p>I 'think' I'm on the right lines with using the .find and the .replace and the regex. I am just a little stuck of getting it to work. I did get it working (of sorts) with a single form element however that java script has been chopped and changed with the above or i would have included that workings in this post. </p>
  
  <p>Thanks for any help :)</p>