JSFiddle - React, Tailwind, and code Playground

HTML

<table style="border-collapse: collapse;" class="main_table" valign="top" border="0" width="90%">
<tbody>
     
     <tr><td class="prompt" align="center">
                     </td>

     
     
     <td class="prompt" align="center"><u>Amount</u>:
                     </td>

     
     
     <td class="prompt" align="center"><u>Real Estate?</u>:
                     </td>

     
     
     <td class="prompt" align="center"><u>Description</u>:
                     </td>

     
     
     <td class="prompt" align="center">
                     </td>

     
            </tr>
       <tr style="background-color: lightgrey;">
     
     <td class="prompt">Refinance (Non-SBA):</td>
     
     
                 </tr>
     
     <tr style="border: thin solid lightgrey;"><td class="prompt"></td>
     
            <td class="header_gray"><input id="q_46" name="q_46" value="1" type="text"></td>
     
          
     <td class="header_gray"><input name="q_8566" checked="checked" type="checkbox"></td>
     
          
     <td class="header_gray"><textarea rows="5" name="q_8567">1</textarea></td>
     
          
     <td class="prompt refinance" align="center"><a class="removeIcon"></a> </td>

    </tr>
    <tr style="border: thin solid lightgrey;">
<td class="prompt"></td>
     
            <td class="header_gray"><input id="q_8573" name="q_8573" value="5" type="text"></td>
     
          
     <td class="header_gray"><input name="q_8574" type="checkbox"></td>
     
          
     <td class="header_gray"><textarea rows="5" name="q_8575">5</textarea></td>
     
          
     <td class="prompt refinance" align="center"><a class="removeIcon"></a> </td>

    </tr>
    <tr style="border: thin solid lightgrey;">
<td class="prompt"></td>
     
            <td class="header_gray"><input id="q_8576" name="q_8576" value="6" type="text"></td>
     
          
     <td class="header_gray"><input name="q_8577" type="checkbox"></td>
     
          
     <td...

JavaScript

var $refinancePageVariables = {};
$refinancePageVariables.refinance = {};
$refinancePageVariables.refinanceSBA = {};
$refinancePageVariables.refinance.amountIDs = new Array();
$refinancePageVariables.refinance.realEstateIDs = new Array();
$refinancePageVariables.refinance.descriptionIDs = new Array();
$refinancePageVariables.refinanceSBA.amountIDs = new Array();
$refinancePageVariables.refinanceSBA.realEstateIDs = new Array();
$refinancePageVariables.refinanceSBA.descriptionIDs = new Array();

(function( $ ){

    var methods = {
        /**
         * Remove the row names from the remaining 5 elements for the refinance question.
         */
        removeRowNames : function() {
            $(this).prev().prev().prev().prev().filter(function() {
                return true;//$(this).html().match(/[\d]/);
            }).html("");
        }, //removeRowNames


        /**
         * Remove a refinance row from the selected parent.
         */
        removeRow : function() {
            //Grab the last class name since that is the element we are storing the refinance and refinanceSBA data in.
            var elementType = $(this).parent().attr('class').split(' ').splice(-1).toString();
            if($('.' + elementType).length > 1) {
                $(this).parent().parent().fadeOut('slow', function() {
                    $(this).remove();
                    
                    //Make sure the addition button is on the last element
                    if(($('.' + elementType).children('a.addIcon').length != 1) || ($('.' + elementType + ':last').children('a.addIcon'))) {
                        $(this).refinance('manageIcons', elementType);
                    }
                });
            } else {
                alert("You cannot remove the last remaining " + elementType + " element.");
            } //if-else
        }, //removeRow


        /**
         * Add a refinance row from the selected parent.
         */
        addRow : function(hidden) {
      ...