JSFiddle - React, Tailwind, and code Playground

HTML

<button id="btn-foo">Add</button>
<hr>
<div id="renderer">
  <div id="fields_1" class="items">
    <div class="form_div">
      <input id="name_1" type="text" value="text1.1" name="name_1">
    </div>
    <div class="form_div">
      <input id="lastname_1" type="text" value="text1.2" name="lastname_1">
    </div>
    <div class="form_div">
      <textarea id="comments_1" cols="80" rows="2" name="comments_1"></textarea>
    </div>
  </div>

CSS

.items {
  padding: 15px 5px 10px;
  border-bottom: 1px solid #bbb;
}

JavaScript

$('#btn-foo').on('click', function() {
  var lastItem = $('#renderer .items:last'),
    lastID = parseInt(lastItem.attr('id').replace('fields_', '')),
    newID = lastID + 1,
    clonedItem = lastItem.clone().attr('id', "fields_" + newID),
    newHTML = clonedItem.html();
  
  newHTML = newHTML.replace('id="name_' +lastID, 'id="name_' + newID);
  newHTML = newHTML.replace('name="name_' +lastID, 'name="name_' + newID);
  newHTML = newHTML.replace('id="lastname_' +lastID, 'id="lastname_' + newID);
  newHTML = newHTML.replace('name="lastname_' +lastID, 'name="lastname_' + newID);
  newHTML = newHTML.replace('id="comments_' +lastID, 'id="comments_' + newID);
  newHTML = newHTML.replace('name="comments_' +lastID, 'name="comments_' + newID);

  clonedItem.html(newHTML);
  clonedItem.find('input[type="text"]').val('');

  $('#renderer').append(clonedItem);
});