How do I change the input name in jQuery
<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>