How to change the value and shape value of a cloned field inside a table row?

Question

I have 2 fields in my form that I want to clone using jQuery, but choosing the structure of the html table confused me how to change the identifier and value of the form field, as well as the label text. Here is the structure of the form field

<table>
 <tbody>
    <tr id="attribute-name">
      <td class="label"><label for="listing_qty">quantity</label></td>
      <td class="value">
        <input id="listing_qty" name="field_name[]" value="quantity" class="required-entry disabled attribute-name input-text" readonly="1" type="text">
      </td>
    </tr>
    <tr id="attribute-custom">
      <td class="label"></td>
      <td class="value">
        <input id="listing_custom_field" name="custom_field[]" value="" placeholder="Custom Attribute Field" type="text" class=" input-text">
      </td>
    </tr>
 </tbody>
</table>

Answer 1

You will need to clone the entire element, and then update the identifiers, values, and text in the cloned element before inserting.

function appendClonedFormInput(el,
  newId,
  newInputId,
  newLabelText,
  newName,
  newValue) {
  // Clone and update id
  var $cloned = $(el)
    .clone()
    .attr('id', newId);
  // Update label
  $cloned.find('label')
    .attr('for', newInputId)
    .text(newLabelText);
  // Update input
  $cloned.find('input')
    .attr('id', newInputId)
    .attr('name', newName)
    .val(newValue);
  return $cloned.insertAfter(
    $('input').last().parents('tr'));
}


appendClonedFormInput('#attribute-name',
  'new-attribute-id',
  'new-inp-id',
  'New Label',
  'new_field',
  'new value');


appendClonedFormInput('#attribute-custom',
  'new-custom-id',
  'new-custom-inp-id',
  'New Custom',
  'new_custom',
  'new custom value');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr id="attribute-name">
      <td class="label">
        <label for="listing_qty">quantity</label>
      </td>
      <td class="value">
        <input id="listing_qty" name="field_name[]" value="quantity" class="required-entry disabled attribute-name input-text" readonly="1" type="text">
      </td>
    </tr>
    <tr id="attribute-custom">
      <td class="label"></td>
      <td class="value">
        <input id="listing_custom_field" name="custom_field[]" value="" placeholder="Custom Attribute Field" type="text" class=" input-text">
      </td>
    </tr>
  </tbody>
</table>

Run codeHide result

Answer 2

HTML .clone() jquery, HTML jquery, jquery.

, . .

$(function(){
  var _counter = 1;
  $("#cloned_html").on("click",function(){
    var $button = $('#attribute-name').clone().prop("id","attribute-name-"+_counter);
    $button.find('#listing_qty').prop("id","listing_qty_"+_counter).val("quantity-"+_counter);
    
    $button.find("label").html("Quantity-"+_counter);
    var selector = '#attribute-name'
    if(_counter>1){
      selector = '#attribute-name-'+(_counter-1)
    }
    $($button).insertAfter(selector);  
    _counter++;
  });  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
 <tbody>
    <tr id="attribute-name">
      <td class="label"><label for="listing_qty">quantity</label></td>
      <td class="value">
        <input id="listing_qty" name="field_name[]" value="quantity" class="required-entry disabled attribute-name input-text" readonly="1" type="text">
      </td>
    </tr>
    <tr id="attribute-custom">
      <td class="label"></td>
      <td class="value">
        <input id="listing_custom_field" name="custom_field[]" value="" placeholder="Custom Attribute Field" type="text" class=" input-text">
      </td>
    </tr>
 </tbody>
</table>
<button id="cloned_html">Clone</button>

Hide result

Answer 3

Separate the final rendering from the template. Another important part of your function is to assign a unique number to create identifiers and names.

I suggest you implement a solution like https://github.com/BorisMoore/jquery-tmpl

Place the template inside the script node with the id, then copy its contents and replace the {} occurrences as you need.