Adding New Fields With Dynamic Field Name Sets Field Names To The Same Name

I have a div that contains a field which I want to add to the page when I click the add button. // the div that contains the field

+ lineNumber + '][fields][firstName]'; var myLabel = newRowObject.find('label'); myLabel.text(label); var myInput = newRowObject.find('input.firstName.dependentfield'); myInput.val(''); myInput.attr('name', inputName); $('div.dependent-row').append(newRowObject); } } $(function() { rowObject = $('div.dependent-row > div.row').clone(); $('#add-dependent-btn').click(function() { var totalRow = $('div.dependent-row > div.row').length; addRow(totalRow + 1); }); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="add-dependent-btn">
  Add row
</button>
<div class="dependent-row">
  <div class="row" style="border:1px solid #ccc; padding: 5px; margin: 10px 0;">
    <label>First Name</label>
    <input type="text" value="" class="firstName dependentfield">
  </div>
</div>