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];

$( table ).delegate( '#button2', 'click', function () {
    
    var thisRow = $( this ).closest( 'tr' )[0];
   $( thisRow ).clone().insertAfter( thisRow ).find( 'input:text' ).val( '' );
     $(this).remove();
});