title: How do I change the input name in jQuery
body: <p>This is what I am currently trying to achieve:</p>
  
  <p><img src="https://i.imgur.com/LzUnGUT.jpg" alt="What it looks like I am trying to achieve."></p>
  
  <p>I am trying to clone a form and change the input name. How would I pull this off.</p>
  
  <p><b>JS: </b></p>
  
  <pre><code>$(document).ready(function() {
  var counter = 0;
  var MAX_FIELDS = 3;
  var MIN_FIELDS = 1;
  var form = $('.force-group');
  
  $('#add').on('click', function(e) {
      if (counter &lt; MAX_FIELDS) {
          //$(".form-group").clone().appendTo("#forceForm");
          $.each(form, function(i) {
              var clone = $('.force-group').first().clone();
              clone.children().val("");
  
              $(this).parent().append(clone);
              if (counter == 0) {
                  $("b:eq(1)").html("&lt;b&gt; Force 2&lt;/b&gt;");
              };
              if (counter == 1) {
                  $("b:eq(3)").html("&lt;b&gt; Force 3&lt;/b&gt;");
              };
              if (counter == 2) {
                  $("b:eq(5)").html("&lt;b&gt; Force 4&lt;/b&gt;");
              };
  
          });
          counter++;
      };
  });
  </code></pre>
  
  <p><b> html: </b></p>
  
  <pre><code>  &lt;#import "template.ftl" as layout /&gt;
    &lt;@layout.template title="Force" js="/js/force.js" css="/css/force.css"&gt;
  
  &lt;h3 class = "text-center"&gt;Total Force&lt;/h3&gt;
  &lt;hr&gt;
  
  &lt;div class="col-md-6 col-md-offset-3 col-xs-8 col-xs-offset-2"&gt;
      &lt;div class="force-selector input_fields_wrap"&gt;
          &lt;a id = 'add' href="#" class="btn btn-primary col-md-5"&gt;Add Force&lt;/a&gt;
          &lt;a id = 'remove' href="#" class="btn btn-warning col-md-5 col-md-offset-2"&gt;Remove Force&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="col-md-6 col-md-offset-"&gt;
      &lt;div class="col-xs-12"&gt;
          &lt;div class = "well" id="force-input"&gt;
              &lt;form id = "forceForm" class = "form-horizontal" method = "POST" autocomplete="off"&gt;
                  &lt;fieldset&gt;
                      &lt;h4 class="text-center" id="form-title"&gt;&lt;strong&gt;Input&lt;/strong&gt;&lt;/h4&gt;
                      &lt;div class="form-group force-group"&gt;
                          &lt;label class = "control-label col-md-2"&gt;&lt;b&gt;Force 1&lt;/b&gt;&lt;/label&gt;
                          &lt;label class = "control-label col-md-2"&gt;Magnitude&lt;/label&gt;
                          &lt;div class = "col-md-3 force-info"&gt;
                              &lt;input type = "text" class="form-control" name="0force" autocomplete="off"&gt;
                          &lt;/div&gt;
                          &lt;label class = "control-label col-md-2"&gt;Angle&lt;/label&gt;
                          &lt;div class = "col-md-3 force-info"&gt;
                              &lt;input type = "text" class="form-control" name="0angle" autocomplete="off"&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/fieldset&gt;
              &lt;/form&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class = "col-md-5"&gt;
      &lt;table id = "forceChart" class="table table-striped table-hover"&gt;
          &lt;thead&gt;
          &lt;tr class="table"&gt;
              &lt;th class="head-pad"&gt;Total Force&lt;/th&gt;
          &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
          &lt;tr class="table"&gt;
              &lt;td class="pad"&gt;Net Force:&lt;/td&gt;
          &lt;/tr&gt;
          &lt;/tbody&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
          &lt;tr class="table"&gt;
              &lt;td class="pad"&gt;Direction:&lt;/td&gt;
          &lt;/tr&gt;
          &lt;/tbody&gt;
          &lt;tfoot&gt;&lt;/tfoot&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  &lt;div class = "col-md-4 col-md-offset-4 col-xs-6 col-xs-offset-3"&gt;
      &lt;div class="form-group"&gt;
          &lt;div class = "col-md-6 col-xs-offset-3"&gt;
              &lt;input id = "calculate" class = "btn btn-success btn-block" type="submit" value="Calculate!"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>This is the jsfiddle link right here:</p>
  
  <p><a href="https://jsfiddle.net/z7kwnpxx/" rel="nofollow noreferrer">Click here for the link</a>.</p>
  
  <p><b> PS: I am using a templater so the jsfiddle will look kinda bad. </b></p>
  
  <p>I am new to jQuery and I have been searching around a solution but I seem to get stuck with it.</p>
  
  <p>I tried using the .last() with the attr edit but that seems not to do anything. </p>