JSFiddle - React, Tailwind, and code Playground

HTML

<!-- class 'template' is simply 'display:none;' -->
<tr id='clonedSection1' style='margin-bottom:4px;' class='clonedSection'>
        <td  class='clonedInput'>
           <g:field type="text" name='patient1.patientName' id='patient1.patientName' required="" />
        </td>
        <td class='clonedInputTwo'>
            <g:field type="number" name="patient1.patientAge" id='patient1.patientAge' size="2" required="" />
        </td>
        <td class='clonedInputThr'>
            F<input type='radio' name='patient1.patientSex' id='patient1.patientSex' value= "F" />
            M<input type='radio' name='patient1.patientSex' id='patient1.patientSex' value= "M" />
        </td>
        <td class='clonedInputFour'>
            <input type='text' name='patient1.patientAddress' id='patient1.patientAddress' />
        </td>
        <td class='clonedInputFive'>
            <g:select name='patient1.gnDiv' id='patient1.gnDiv' from="${dft.GnDivision.list()}" optionKey="id" required=""/>
            </td>
          
         <td class='clonedInputSix'>
             <div id="button">
            <input  type='button' id='btnAdd' title="Add New Record" value='add New Record'/>
            <input type='button'  id="btnDel" title="Remove Record" value='remove Record'  />
           </div>
             </td>
       
    </tr>

CSS

.template{
    display: none;
}

JavaScript

$(document).ready(function() {

  
    $('#btnAdd').click(function() {


        var num     = $('.clonedSection').length;
   

        var newNum  = new Number(num + 1);
        $('#ids').attr('value',newNum);
     
        var newSection = $('#clonedSection' + num).clone().attr('id', 'clonedSection' + newNum);

        newSection.children(':first').children(':first').attr('id', 'patient' + newNum+'.patientName').attr('name', 'patient' + newNum+'.patientName').attr('value','');
      newSection.children(':nth-child(2)').children(':first').attr('id', 'patient' + newNum+'.patientAge').attr('name', 'patient' + newNum+'.patientAge').attr('value','');
        newSection.children(':nth-child(3)').children(':first').attr('id', 'patient' + newNum+'.patientSex').attr('name', 'patient' + newNum+'.patientSex').attr('false','');
        newSection.children(':nth-child(3)').children(':nth-child(2)').attr('id', 'patient' + newNum+'.patientSex').attr('name', 'patient' + newNum+'.patientSex').attr('false','');
        newSection.children(':nth-child(4)').children(':first').attr('id', 'patient' + newNum+'.patientAddress').attr('name', 'patient' + newNum+'.patientAddress').attr('value','');
        newSection.children(':nth-child(5)').children(':first').attr('id', 'patient' + newNum+'.gnDiv').attr('name', 'patient' + newNum+'.gnDiv').attr('value','');
         //newSection.children(':nth-child(6)').children(':first').attr('id', 'patient' + newNum+'.$('#btnAdd')').attr('name', 'patient' + newNum+'.$('#btnAdd')').$('input:submit').attr("disabled", true).removeAttr('disabled').attr('','');
      //  newSection.children(':nth-child(6)').children(':nth-child(5)').attr('id', 'patient' + newNum+'.$('#btnDel')').attr('name', 'patient' + newNum+'.$('#btnDel')').removeAttr('disabled');
        //$('.clonedSection').last().append(newSection)

 
 $('#clonedSection' + num).after(newSection);
 // $('#clonedSection' + newNum).$('#btnAdd').removeAttr("disabled").image(enable);
//...