JSFiddle - React, Tailwind, and code Playground

by fmdataweb

HTML

<table width="100%" border="0" cellspacing="0" cellpadding="10" id="nextYear" class="border">
    <tr class="d_green">
        <td colspan="6">NEXT YEAR</td>
      </tr>
    <tr>
      <td width="36%">Activity</td>
      <td width="9%">Risk</td>
      <td width="13%">Hours</td>
      <td width="13%">Weels</td>
      <td width="13%">Average</td>
      <td width="16%">&nbsp;</td>
    </tr>
    <tr>
      <td align="center"><input type="text" name="activity" id="nextYearSelect1" class="input_b_r" /></td>
      <td class="risk"><select name="nextYearRisk1" id="nextYearRisk1">
          <option></option>
          <option>low</option>
          <option>moderate</option>
          <option>high</option>
      </select></td>
      <td><input type="text" name="textfield" id="nextYearHours1" class="input_b_r" /></td>
      <td><input type="text" name="textfield2" id="nextYearWeeks1" class="input_b_r" /></td>
      <td><input type="text" name="textfield3" id="nextYearAverage1" class="input_b_r" /></td>
      <td><input type="button" name="button2" id="button2" value="New Row" class="button mt5" /></td>
    </tr>
    <tr class="l_white">
      <td align="center">&nbsp;</td>
      <td colspan="4" align="right"><table width="100%" border="0" cellpadding="2" cellspacing="0">
        <tr>
          <td width="65%">Total of moderate risk activities:</td>
          <td width="35%"><input type="text" name="totalModNextYear" id="textfield6" class="input_b1" /></td>
          <td width="35%">hours/year</td>
        </tr>
        <tr>
          <td>Total of high-risk activities:</td>
          <td><input type="text" name="totalHighNextYear" id="textfield7" class="input_b1" /></td>
          <td>hours/year</td>
        </tr>
      </table></td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td align="center">&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td colspan="2" align="right"><input type="submit" name="button3" id="button3" value="Submit"...

JavaScript

var table = $( '#nextYear' )[0];

var newIDSuffix = 2;
$( table ).delegate( 'input[type="button"]', 'click', function () {
    var thisRow = $( this ).closest( 'tr' )[0];
    
    var cloned = $( thisRow ).clone();
    cloned.find('input, select').each(function() {
         var id = $(this).attr('id');
         id = id.substring(0, id.length-1) + newIDSuffix;
         $(this).attr('id', id);
    });
    
    cloned.insertAfter( thisRow ).find( 'input:text' ).val( '' );
    $(this).remove();
    newIDSuffix++;
});