Unable to dynamically add name attribute to form element
<p>I wish to dynamically add the name attribute as 'pickup_city2' and 'pickup_address2' to select elements with ids, pickup_cityExtend and pickup_addressExtend.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$('#multiCheck').change(function() {
  if (this.checked) {
    var $pick = $('#cityPickExtend');
    $clone = $pick.clone().removeClass('hide').removeAttr('id').insertAfter($pick);
    var city = document.getElementById('pickup_cityExtend');
    city.setAttribute('name', 'pickup_city2');

    var address = document.getElementById('pickup_addressExtend');
    address.setAttribute('name', 'pickup_address2');
  }
  if (!this.checked) {
    $clone.remove();
  }

})</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;


&lt;form class="cityPick form-horizontal form-label-right" action="" method="POST" novalidate&gt;{% csrf_token %}
  &lt;div class="form-group"&gt;
    &lt;div class="city col-md-4 col-sm-4 col-xs-10"&gt;
      &lt;div class="item form-group"&gt;
        &lt;label class="control-label" for="city"&gt;City&lt;span class="required"&gt;*&lt;/span&gt;
        &lt;/label&gt;
        &lt;div class=""&gt;
          &lt;select class="form-control" id="city" name="pick_up_city"&gt;
            &lt;option&gt;Select City&lt;/option&gt;
            &lt;option&gt;Mumbai&lt;/option&gt;
            &lt;option&gt;Delhi&lt;/option&gt;
            &lt;option&gt;Jaipur&lt;/option&gt;
          &lt;/select&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;

    &lt;div class="address col-md-7 col-sm-7 col-xs-10"&gt;
      &lt;div class="item form-group"&gt;
        &lt;label class="control-label" for="address"&gt;Address&lt;span class="required"&gt;*&lt;/span&gt;
        &lt;/label&gt;
        &lt;div class=""&gt;
          &lt;input type="text" class="form-control" id="address" name="pick_up_address"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;

    &lt;div class="multiCheck col-md-4 col-sm-4 col-xs-12"&gt;
      &lt;input type="checkbox" value="Yes" id="multiCheck"&gt;Have more than one pickup point?
      &lt;br&gt;
    &lt;/div&gt;
  &lt;/div&gt;

  &lt;div class="form-group hide" id="cityPickExtend"&gt;
    &lt;div class="city col-md-4 col-sm-4 col-xs-10"&gt;
      &lt;div class="item form-group"&gt;
        &lt;label class="control-label" for="city"&gt;City&lt;span class="required"&gt;*&lt;/span&gt;
        &lt;/label&gt;
        &lt;div class=""&gt;
          &lt;select class="form-control" id="pickup_cityExtend" name=""&gt;
            &lt;option&gt;Select City&lt;/option&gt;
            &lt;option&gt;Mumbai&lt;/option&gt;
            &lt;option&gt;Delhi&lt;/option&gt;
            &lt;option&gt;Jaipur&lt;/option&gt;
          &lt;/select&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;

    &lt;div class="address col-md-7 col-sm-7 col-xs-10"&gt;
      &lt;div class="item form-group"&gt;
        &lt;label class="control-label" for="address"&gt;Address&lt;span class="required"&gt;*&lt;/span&gt;
        &lt;/label&gt;
        &lt;div class=""&gt;
          &lt;input type="text" class="form-control" id="pickup_addressExtend" name=""&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;

    &lt;div class="removeBtn col-md-1 col-sm-1 col-xs-2"&gt;
      &lt;button type="button" id="removeBtn"&gt;Remove&lt;/button&gt;
    &lt;/div&gt;

    &lt;div class="addBtn"&gt;
      &lt;button type="button" id="addBtn"&gt;Add another pickup location&lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;

  &lt;div class="item form-group"&gt;
    &lt;label for="shipment_datetime" class="control-label dateTime"&gt;Pickup Date &amp;amp; time
      &lt;span class="required"&gt;*&lt;/span&gt;
    &lt;/label&gt;

    &lt;div class="input-group date form_datetime col-md-4 col-sm-4 col-xs-12" data-date="" data-date-format="dd MM yyyy - HH:ii p" data-link-field="dtp_input1"&gt;

      &lt;input class="form-control" size="16" name="shipment_datetime" type="text" value="" readonly style="background-color: #fff;"&gt;

      &lt;span class="input-group-addon"&gt;
                                                    &lt;span class="glyphicon glyphicon-remove"&gt;&lt;/span&gt;
      &lt;/span&gt;

      &lt;span class="input-group-addon"&gt;
                                                    &lt;span class="glyphicon glyphicon-th"&gt;&lt;/span&gt;
      &lt;/span&gt;
    &lt;/div&gt;
  &lt;/div&gt;

&lt;/form&gt;</code></pre>
</div>
</div>
</p>

<p>Below is my jquery code.</p>

<pre><code>$('#multiCheck').change(function() {
  if (this.checked) {
    var $pick = $('#cityPickExtend');
    $clone = $pick.clone().removeClass('hide').removeAttr('id').insertAfter($pick);
    var city = document.getElementById('pickup_cityExtend');
    city.setAttribute('name', 'pickup_city2');
    var address = document.getElementById('pickup_addressExtend');
    address.setAttribute('name', 'pickup_address2');
  }
  if (!this.checked) {
    $clone.remove();
  }

})
</code></pre>