How to update front end Craft new row - stuck on JavaScript I'm building out a front end entry form with a Natrix and everything is coming along fine. However when users create a new row each new row needs to be unique in order to be saved. This is where I'm stuck.

Simplified HTML:

&lt;div class="matrixblock"&gt;
    &lt;p&gt;
    block id: new_0
&lt;/p&gt;

&lt;div class="col-sm-6"&gt;
    &lt;input type="text" name="fields[staffProfiles][new_0][fields][employeeName]" value="" placeholder="Full Name"&gt;
&lt;/div&gt;&lt;!-- /.col-sm-6 --&gt;
&lt;div class="col-sm-6"&gt;
    &lt;input type="text" name="fields[staffProfiles][new_0][fields][jobTitle]" value=""  placeholder="Job Title"&gt;
&lt;/div&gt;&lt;!-- /.col-sm-6 --&gt;


&lt;a href="" class="remove-row"&gt;&lt;i class="fa fa-times"&gt;&lt;/i&gt;&lt;/a&gt;


&lt;/div&gt;&lt;!-- /.matrixblock --&gt;


JS: 

var blocknum = 0;

// add a new person
$('#addPerson').click(function(e){
    e.preventDefault();
    console.log('clicked addPerson');

    //iterate blocknumber
    blocknum = blocknum+= 1;
    console.log('blocknum is ' + blocknum);

    var newPerson = "&lt;div class='newperson'&gt;&lt;/div&gt;";
    $('.newBlock').append(newPerson);
    $('.newBlock .newperson:last-child').load('/store/newperson');

    // replace all instances of new_0 with new1, new2 etc.. as rows added
    // this line doesn't do anything, why?
    $('.newBlock .newperson:last-child').replace('new_0','new' + blocknum);

})


console.log('blocknum is ' + blocknum); is showing that the blocknum is increasing with each row. the Replace in the last line of javascript is just not doing anything.

The new person row gets added via ajax correctly but each time it's added [new_0] needs to be unique, but nothing I'm trying is working.
You can get the number of rows you already have from the DOM, then use that to determine how many you'll have after you add a new one.

$('#addPerson').click(function(e){
  e.preventDefault();
  console.log('clicked addPerson');

  var newPerson = "&lt;div class='newperson'&gt;&lt;/div&gt;";
  $('.newBlock').append(newPerson);
  $('.newBlock .newperson:last-child').load('/store/newperson');

  var blocknum = $('.newBlock .newperson').length;
  $('.newBlock .newperson:last-child').replace('new_0','new' + blocknum);
});


Also note that in your example you were replacing using $blocknum, but you had defined it to be blocknum without the $. You've already fixed this :)

Hope this works out!