двойной наведение на 2 таблицы одновременно в добавленной строке

Question

У меня 2 стола. В таблице 1 есть кнопка, которую можно нажать, чтобы добавить строку в таблицу 1, а также в таблицу 2 одновременно. Существует также наведение курсора на строку таблицы в таблице 1 и таблице 2 одновременно с тем же дочерним элементом строки, который является функцией двойного наведения. Но двойной наведение не работает с добавленными строками. Пожалуйста, помогите мне. Я застрял на этом.

Это код html:

@*Table 1*@
    <table class="dcf-step4-table" id="PPE-table">
                            <tr style="background-color:white">
                                <th>PPE Type</th>
                                <th>Description</th>
                                <th></th>
                                <th>Fixed Asset Balance (as of Val. Date)</th>
                                <th>Remaining Useful Life (years)</th>
                                <th></th>
                                <th></th>
                                <th></th>
                            </tr>
    
    
                            <tr>
                                <td class="dcf-nwc-columns-values-table">Type 1</td>
                                <td class="dcf-nwc-columns-values-table">
                                    <select name="PPE" id="PPE">
                                        <option value="">- Select -</option>
                                        <option value="Buildings">Buildings</option>
                                        <option value="Computers">Computer Equipment</option>
                                        <option value="CIP">Construction in Progress</option>
                                       
                                </td>
                                <td class="dcf-nwc-columns-values-table"></td>
                                <td class="dcf-nwc-columns-values-table"><input class="dcf-input-box" type="text"></td>
                                <td class="dcf-nwc-columns-values-table"><input class="dcf-input-box" type="text"></td>
    
                                <td class="dcf-nwc-columns-values-table"></td>
                                <td class="dcf-nwc-columns-values-table"><button type="button" class="dcf-btn" onclick="deleteRow(this);" value="Delete" /><i class="fa fa-times" /></td>
                            </tr>
                            <tr>
                                <td class="dcf-nwc-columns-values-table">Type 2</td>
                                <td class="dcf-nwc-columns-values-table">
                                    <select name="PPE" id="PPE">
                                        <option value="">- Select -</option>
                                        <option value="Buildings">Buildings</option>
                                        <option value="Computers">Computer Equipment</option>
                                        <option value="CIP">Construction in Progress</option>
                                     
    
                                </td>
                                <td class="dcf-nwc-columns-values-table"></td>
                                <td class="dcf-nwc-columns-values-table"><input class="dcf-input-box" type="text"></td>
                                <td class="dcf-nwc-columns-values-table"><input class="dcf-input-box" type="text"></td>
    
                                <td class="dcf-nwc-columns-values-table"></td>
                                <td class="dcf-nwc-columns-values-table"><button type="button" class="dcf-btn" onclick="deleteRow(this);" value="Delete" /><i class="fa fa-times" /></td>
    
                            </tr>
                            <tr>
                                <td class="dcf-nwc-columns-values-table">Type 3</td>
                                <td class="dcf-nwc-columns-values-table">
                                    <select name="PPE" id="PPE">
                                        <option value="">- Select -</option>
                                        <option value="Buildings">Buildings</option>
                                        <option value="Computers">Computer Equipment</option>
                                        <option value="CIP">Construction in Progress</option>
                                       
                                    </select>
    
                                </td>
                                <td class="dcf-nwc-columns-values-table"></td>
                                <td class="dcf-nwc-columns-values-table"><input class="dcf-input-box" type="text"></td>
                                <td class="dcf-nwc-columns-values-table"><input class="dcf-input-box" type="text"></td>
    
                                <td class="dcf-nwc-columns-values-table"></td>
                                <td class="dcf-nwc-columns-values-table"><button type="button" class="dcf-btn" onclick="deleteRow(this);" value="Delete" /><i class="fa fa-times" /></td>
    
                            </tr>
    
                            <tr>
                                <td class="dcf-nwc-columns-values-table"><b>Total</b></td>
                                <td class="dcf-nwc-columns-values-table"></td>
                                <td class="dcf-nwc-columns-values-table"></td>
                                <td class="dcf-nwc-columns-values-table"><b>100000</b></td>
                                <td class="dcf-nwc-columns-values-table"></td>
                                <td class="dcf-nwc-columns-values-table"></td>
                                <td class="dcf-nwc-columns-values-table"></td>        
                            </tr>              
                        </table>

     <div class="dcf-incomestatement-grid-container">
                                <div><div><button type="button" class="dcf-btn" id="addRowPPE"><i class="fa fa-plus"></i></button> Add More PPE Items</div></div>
                            </div>
    @*Table 2*@
   <table class="dcf-step4-table" id="PPE-result-table">
                            <tr class="header expand">
                                <th class="dcf-left-column-border-table"><span class="sign"></span>Depreciation for existing fixed assets</th>
                                <th>@Html.TextBoxFor(x => x.ProjectedFinancialYears[0].FinancialYearDisplayName, Model.ProjectedFinancialYears[0].FinancialYearDisplayName.ToString(), new { @class = "dcf-years-header-box" })</th>
                                <th>@Html.TextBoxFor(x => x.ProjectedFinancialYears[1].FinancialYearDisplayName, Model.ProjectedFinancialYears[1].FinancialYearDisplayName.ToString(), new { @class = "dcf-years-header-box" })</th>
                                <th>@Html.TextBoxFor(x => x.ProjectedFinancialYears[2].FinancialYearDisplayName, Model.ProjectedFinancialYears[2].FinancialYearDisplayName.ToString(), new { @class = "dcf-years-header-box" })</th>
                                <th>@Html.TextBoxFor(x => x.ProjectedFinancialYears[3].FinancialYearDisplayName, Model.ProjectedFinancialYears[3].FinancialYearDisplayName.ToString(), new { @class = "dcf-years-header-box" })</th>
                                <th>@Html.TextBoxFor(x => x.ProjectedFinancialYears[4].FinancialYearDisplayName, Model.ProjectedFinancialYears[4].FinancialYearDisplayName.ToString(), new { @class = "dcf-years-header-box" })</th>
                            </tr>
                            <tr>
                                <td class="dcf-nwc-columns-values-table">Type 1</td>
                                <td class="dcf-nwc-columns-values-table">@Html.TextBoxFor(x => x.ProjectedFinancialYears[0].DepreciationOfFixedAssetsBalance[0], Model.ProjectedFinancialYears[0].DepreciationOfFixedAssetsBalance[0].ToString(), new { @class = "dcf-years-header-box" })</td>
                                <td class="dcf-nwc-columns-values-table">@Html.TextBoxFor(x => x.ProjectedFinancialYears[1].DepreciationOfFixedAssetsBalance[0], Model.ProjectedFinancialYears[1].DepreciationOfFixedAssetsBalance[0].ToString(), new { @class = "dcf-years-header-box" })</td>
                                <td class="dcf-nwc-columns-values-table">@Html.TextBoxFor(x => x.ProjectedFinancialYears[2].DepreciationOfFixedAssetsBalance[0], Model.ProjectedFinancialYears[2].DepreciationOfFixedAssetsBalance[0].ToString(), new { @class = "dcf-years-header-box" })</td>
                                <td class="dcf-nwc-columns-values-table">@Html.TextBoxFor(x => x.ProjectedFinancialYears[3].DepreciationOfFixedAssetsBalance[0], Model.ProjectedFinancialYears[3].DepreciationOfFixedAssetsBalance[0].ToString(), new { @class = "dcf-years-header-box" })</td>
                                <td class="dcf-nwc-columns-values-table">@Html.TextBoxFor(x => x.ProjectedFinancialYears[4].DepreciationOfFixedAssetsBalance[0], Model.ProjectedFinancialYears[4].DepreciationOfFixedAssetsBalance[0].ToString(), new { @class = "dcf-years-header-box" })</td>
                            </tr>
                            <tr>
                                <td class="dcf-nwc-columns-values-table">Type 2</td>
                                <td class="dcf-nwc-columns-values-table">@Html.TextBoxFor(x => x.ProjectedFinancialYears[0].DepreciationOfFixedAssetsBalance[1], Model.ProjectedFinancialYears[0].DepreciationOfFixedAssetsBalance[1].ToString(), new { @class = "dcf-years-header-box" })</td>
                                <td class="dcf-nwc-columns-values-table">@Html.TextBoxFor(x => x.ProjectedFinancialYears[1].DepreciationOfFixedAssetsBalance[1], Model.ProjectedFinancialYears[1].DepreciationOfFixedAssetsBalance[1].ToString(), new { @class = "dcf-years-header-box" })</td>
                                <td class="dcf-nwc-columns-values-table">@Html.TextBoxFor(x => x.ProjectedFinancialYears[2].DepreciationOfFixedAssetsBalance[1], Model.ProjectedFinancialYears[2].DepreciationOfFixedAssetsBalance[1].ToString(), new { @class = "dcf-years-header-box" })</td>
                                <td class="dcf-nwc-columns-values-table">@Html.TextBoxFor(x => x.ProjectedFinancialYears[3].DepreciationOfFixedAssetsBalance[1], Model.ProjectedFinancialYears[3].DepreciationOfFixedAssetsBalance[1].ToString(), new { @class = "dcf-years-header-box" })</td>
                                <td class="dcf-nwc-columns-values-table">@Html.TextBoxFor(x => x.ProjectedFinancialYears[4].DepreciationOfFixedAssetsBalance[1], Model.ProjectedFinancialYears[4].DepreciationOfFixedAssetsBalance[1].ToString(), new { @class = "dcf-years-header-box" })</td>
                            </tr>
                            <tr>
                                <td class="dcf-nwc-columns-values-table">Type 3</td>
                                <td class="dcf-nwc-columns-values-table">@Html.TextBoxFor(x => x.ProjectedFinancialYears[0].DepreciationOfFixedAssetsBalance[2], Model.ProjectedFinancialYears[0].DepreciationOfFixedAssetsBalance[2].ToString(), new { @class = "dcf-years-header-box" })</td>
                                <td class="dcf-nwc-columns-values-table">@Html.TextBoxFor(x => x.ProjectedFinancialYears[1].DepreciationOfFixedAssetsBalance[2], Model.ProjectedFinancialYears[1].DepreciationOfFixedAssetsBalance[2].ToString(), new { @class = "dcf-years-header-box" })</td>
                                <td class="dcf-nwc-columns-values-table">@Html.TextBoxFor(x => x.ProjectedFinancialYears[2].DepreciationOfFixedAssetsBalance[2], Model.ProjectedFinancialYears[2].DepreciationOfFixedAssetsBalance[2].ToString(), new { @class = "dcf-years-header-box" })</td>
                                <td class="dcf-nwc-columns-values-table">@Html.TextBoxFor(x => x.ProjectedFinancialYears[3].DepreciationOfFixedAssetsBalance[2], Model.ProjectedFinancialYears[3].DepreciationOfFixedAssetsBalance[2].ToString(), new { @class = "dcf-years-header-box" })</td>
                                <td class="dcf-nwc-columns-values-table">@Html.TextBoxFor(x => x.ProjectedFinancialYears[4].DepreciationOfFixedAssetsBalance[2], Model.ProjectedFinancialYears[4].DepreciationOfFixedAssetsBalance[2].ToString(), new { @class = "dcf-years-header-box" })</td>
                            </tr>
                            <tr class="header expand">
                                <td class="dcf-nwc-columns-values-table"><b>Total</b></td>
                                <td class="dcf-nwc-columns-values-table"><b>@Html.TextBoxFor(x => x.ProjectedFinancialYears[0].TotalDepreciationOfFixedAssetsBalancePerYear, Model.ProjectedFinancialYears[0].TotalDepreciationOfFixedAssetsBalancePerYear.ToString(), new { @class = "dcf-years-header-box" })</b></td>
                                <td class="dcf-nwc-columns-values-table"><b>@Html.TextBoxFor(x => x.ProjectedFinancialYears[1].TotalDepreciationOfFixedAssetsBalancePerYear, Model.ProjectedFinancialYears[1].TotalDepreciationOfFixedAssetsBalancePerYear.ToString(), new { @class = "dcf-years-header-box" })</b></td>
                                <td class="dcf-nwc-columns-values-table"><b>@Html.TextBoxFor(x => x.ProjectedFinancialYears[2].TotalDepreciationOfFixedAssetsBalancePerYear, Model.ProjectedFinancialYears[2].TotalDepreciationOfFixedAssetsBalancePerYear.ToString(), new { @class = "dcf-years-header-box" })</b></td>
                                <td class="dcf-nwc-columns-values-table"><b>@Html.TextBoxFor(x => x.ProjectedFinancialYears[3].TotalDepreciationOfFixedAssetsBalancePerYear, Model.ProjectedFinancialYears[3].TotalDepreciationOfFixedAssetsBalancePerYear.ToString(), new { @class = "dcf-years-header-box" })</b></td>
                                <td class="dcf-nwc-columns-values-table"><b>@Html.TextBoxFor(x => x.ProjectedFinancialYears[4].TotalDepreciationOfFixedAssetsBalancePerYear, Model.ProjectedFinancialYears[4].TotalDepreciationOfFixedAssetsBalancePerYear.ToString(), new { @class = "dcf-years-header-box" })</b></td>
                            </tr>
                        </table>

Это сценарий:

//Double hover
$(function () {
    $("#PPE-table tr:not(:first-child)").hover(
        function () {
            $(this).addClass('highlight');
            $('#PPE-result-table tr:not(:first-child):eq(' + $('#PPE-table tr:not(:first-child)').index($(this)) + ')').addClass('highlight');
        },
        function () {
            $(this).removeClass('highlight');
            $('#PPE-result-table tr:not(:first-child):eq(' + $('#PPE-table tr:not(:first-child)').index($(this)) + ')').removeClass('highlight');
        }
    );
});
$(function () {
    $("#PPE-result-table tr:not(:first-child)").hover(
        function () {
            $(this).addClass('highlight');
            $('#PPE-table tr:not(:first-child):eq(' + $('#PPE-result-table tr:not(:first-child)').index($(this)) + ')').addClass('highlight');
        },
        function () {
            $(this).removeClass('highlight');
            $('#PPE-table tr:not(:first-child):eq(' + $('#PPE-result-table tr:not(:first-child)').index($(this)) + ')').removeClass('highlight');
        }
    );
});



$(function () {
    $("#WC-results-table tr:not(:first-child)").hover(
        function () {
            $(this).addClass('highlight');
            $('#WC-table tr:not(:first-child):eq(' + $('#WC-results-table tr:not(:first-child)').index($(this)) + ')').addClass('highlight');
        },
        function () {
            $(this).removeClass('highlight');
            $('#WC-table tr:not(:first-child):eq(' + $('#WC-results-table tr:not(:first-child)').index($(this)) + ')').removeClass('highlight');
        }
    );
});

$(function () {
    $("#WC-table tr:not(:first-child)").hover(
        function () {
            $(this).addClass('highlight');
            $('#WC-result-table tr:not(:first-child):eq(' + $('#WC-table tr:not(:first-child)').index($(this)) + ')').addClass('highlight');
        },
        function () {
            $(this).removeClass('highlight');
            $('#WC-result-table tr:not(:first-child):eq(' + $('#WC-table tr:not(:first-child)').index($(this)) + ')').removeClass('highlight');
        }
    );
});




$(function () {
    $("#Turnover-results-table tr:not(:first-child)").hover(
        function () {
            $(this).addClass('highlight');
            $('#Turnover-table tr:not(:first-child):eq(' + $('#Turnover-results-table tr:not(:first-child)').index($(this)) + ')').addClass('highlight');
        },
        function () {
            $(this).removeClass('highlight');
            $('#Turnover-table tr:not(:first-child):eq(' + $('#Turnover-results-table tr:not(:first-child)').index($(this)) + ')').removeClass('highlight');
        }
    );
});
$(function () {
    $("#Turnover-table tr:not(:first-child)").hover(
        function () {
            $(this).addClass('highlight');
            $('#Turnover-results-table tr:not(:first-child):eq(' + $('#Turnover-table tr:not(:first-child)').index($(this)) + ')').addClass('highlight');
        },
        function () {
            $(this).removeClass('highlight');
            $('#Turnover-results-table tr:not(:first-child):eq(' + $('#Turnover-table tr:not(:first-child)').index($(this)) + ')').removeClass('highlight');
        }
    );
});

//add rows
      $('#addRowPPE').click(function () {
            $('#PPE-table tr:last').before('<tr><td class="dcf-nwc-columns-values-table">Type</td><td class="dcf-nwc-columns-values-table"><select name="PPE" id="PPE"><option value="">- Select -</option><option value="Buildings">Buildings</option><option value="Computers">Computer Equipment</option><option value="CIP">Construction in Progress</option><option value="Furniture">Furniture & Fixtures</option><option value="IA">Intangible Assets</option><option value="LandUseRights">Land Use Rights</option><option value="Lease">Leasehold Improvements</option><option value="Machinery">Machinery</option><option value="OfficeEquipment">Office Equipment</option><option value="Vehicles">Vehicles</option></select></td><td class="dcf-nwc-columns-values-table"></td><td class="dcf-nwc-columns-values-table"><input class="dcf-input-box" type="text"></td><td class="dcf-nwc-columns-values-table"><input class="dcf-input-box" type="text"></td><td class="dcf-nwc-columns-values-table"></td><td class="dcf-nwc-columns-values-table"><button type="button" class="dcf-btn" onclick="deleteRow(this);" value="Delete"></b><i class="fa fa-times"></i></td></tr>')
              $('#PPE-result-table tr:last').before('<tr><td class="dcf-nwc-columns-values-table">Type</td><td class="dcf-nwc-columns-values-table">@Html.TextBoxFor(x => x.ProjectedFinancialYears[0].DepreciationOfFixedAssetsBalance[2], Model.ProjectedFinancialYears[0].DepreciationOfFixedAssetsBalance[2].ToString(), new { @class = "dcf-years-header-box" })</td><td class="dcf-nwc-columns-values-table">@Html.TextBoxFor(x => x.ProjectedFinancialYears[1].DepreciationOfFixedAssetsBalance[2], Model.ProjectedFinancialYears[1].DepreciationOfFixedAssetsBalance[2].ToString(), new { @class = "dcf-years-header-box" })</td><td class="dcf-nwc-columns-values-table">@Html.TextBoxFor(x => x.ProjectedFinancialYears[2].DepreciationOfFixedAssetsBalance[2], Model.ProjectedFinancialYears[2].DepreciationOfFixedAssetsBalance[2].ToString(), new { @class = "dcf-years-header-box" })</td><td class="dcf-nwc-columns-values-table">@Html.TextBoxFor(x => x.ProjectedFinancialYears[3].DepreciationOfFixedAssetsBalance[2], Model.ProjectedFinancialYears[3].DepreciationOfFixedAssetsBalance[2].ToString(), new { @class = "dcf-years-header-box" })</td><td class="dcf-nwc-columns-values-table">@Html.TextBoxFor(x => x.ProjectedFinancialYears[4].DepreciationOfFixedAssetsBalance[2], Model.ProjectedFinancialYears[4].DepreciationOfFixedAssetsBalance[2].ToString(), new { @class = "dcf-years-header-box" })</td></tr>');
        });

        $('#addRowCapEx').click(function () {
            $('#CapEx-table').append(`<tr>${$('#CapEx-default-row').html()}</tr>`);
            $('#CapEx-results-table tr:nth-child(6)').after(`<tr>
                                    <td class="dcf-nwc-columns-values-table">FY</td>
                                    <td class="dcf-nwc-columns-values-table">@Html.TextBoxFor(x => x.ProjectedFinancialYears[0].DepreciationOfCapex[0], Model.ProjectedFinancialYears[0].DepreciationOfCapex[0].ToString(), new { @class = "dcf-years-header-box" })</td>
                                    <td class="dcf-nwc-columns-values-table">@Html.TextBoxFor(x => x.ProjectedFinancialYears[1].DepreciationOfCapex[0], Model.ProjectedFinancialYears[1].DepreciationOfCapex[0].ToString(), new { @class = "dcf-years-header-box" })</td>
                                    <td class="dcf-nwc-columns-values-table">@Html.TextBoxFor(x => x.ProjectedFinancialYears[2].DepreciationOfCapex[0], Model.ProjectedFinancialYears[2].DepreciationOfCapex[0].ToString(), new { @class = "dcf-years-header-box" })</td>
                                    <td class="dcf-nwc-columns-values-table">@Html.TextBoxFor(x => x.ProjectedFinancialYears[3].DepreciationOfCapex[0], Model.ProjectedFinancialYears[3].DepreciationOfCapex[0].ToString(), new { @class = "dcf-years-header-box" })</td>
                                    <td class="dcf-nwc-columns-values-table">@Html.TextBoxFor(x => x.ProjectedFinancialYears[4].DepreciationOfCapex[0], Model.ProjectedFinancialYears[4].DepreciationOfCapex[0].ToString(), new { @class = "dcf-years-header-box" })</td>
                                </tr>`);

        });

        $('#addRowWC').click(function () {
            $('#WC-table tr:last').before(`<tr>
                                        <td class="dcf-nwc-columns-values-table">1.</td>
                                        <td>
                                            <select required id="Dropdown_TEST">
                                                <option value="selectoption1">- Select -</option>
                                                <option class="cont" value="TEST 1"> Assets</option>
                                                <option class="cont_2" value="TEST 3"> Liabilities</option>
                                            </select>
                                        </td>
                                        <td class="display" style="display:none">
                                            <select required id="platt">
                                                <option value="">- Select -</option>
                                                <option value="Test 4"> Account Receivables</option>
                                                <option value="Test 5"> Other Receivables</option>
                                                <option value="Test 6"> Inventories</option>
                                                <option value="Test 7"> Other Current Assets</option>
                                            </select>
                                        </td>
                                        <td class="display_1" style="display:none"; text-align:left; width:10px">
                                            <select required id="platt2">
                                                <option value="Test 8">- Select -</option>
                                                <option value="Test 9"> Account Payables</option>
                                                <option value="Test 10">Other Payables</option>
                                                <option value="Test 11"> Other Current Liabilities</option>
                                                <option value="Test 12"> Accrued Expenses</option>
                                            </select>
                                        </td>

                                        <td class="dcf-nwc-columns-values-table"><button type="button" class="dcf-btn" onclick="deleteRow3(this);" value="Delete"></b><i class="fa fa-times"></i></td>
                                    </tr>`);
            $('#WC-results-table tr:nth-child(2)').before('<tr><td class= "dcf-nwc-columns-values-table" > 1.</td><td class="dcf-nwc-columns-values-table"><input class="dcf-input-box" type="text"></td><td class="dcf-nwc-columns-values-table"><input class="dcf-input-box" type="text"></td><td class="dcf-nwc-columns-values-table"><input class="dcf-input-box" type="text"></td><td class="dcf-nwc-columns-values-table"><input class="dcf-input-box" type="text"></td><td class="dcf-nwc-columns-values-table"><input class="dcf-input-box" type="text"></td><td class="dcf-nwc-columns-values-table"><input class="dcf-input-box" type="text"></td></tr>');
        });




        $('#addRowTurnover').click(function () {
            $('#Turnover-table tr:last').before(`<tr>
                                    <td class="dcf-nwc-columns-values-table">#.</td>
                                    <td class="dcf-nwc-columns-values-table">Assets/Liabilities</td>
                                    <td class="dcf-nwc-columns-values-table">WCA Name</td>
                                    <td class="dcf-nwc-columns-values-table">

                                        <select style="color:black" name="TurnoverPL" id="TurnoverPL">
                                            <option value="">- Select -</option>
                                            <option value="Revenue">Revenue</option>
                                            <option value="CoGS">CoGS</option>
                                            <option value="SG&A">SG&A Expenses</option>

                                        </select>

                                    </td>
                                    <td class="dcf-nwc-columns-values-table"><input class="dcf-input-box" type="text"></td>
                                    <td class="dcf-nwc-columns-values-table"><input class="dcf-input-box" type="text"></td>
                                      <td class="dcf-nwc-columns-values-table"><button type="button" class="dcf-btn" onclick="deleteRow4(this);" value="Delete"></b><i class="fa fa-times"></i></td>
                                    </tr>`);
            $('#Turnover-results-table tr:nth-child(4)').after('<tr><td class="dcf-nwc-columns-values-table">#</td><td class="dcf-nwc-columns-values-table"></td><td class="dcf-nwc-columns-values-table"></td><td class="dcf-nwc-columns-values-table"></td><td class="dcf-nwc-columns-values-table"></td><td class="dcf-nwc-columns-values-table"></td></tr>');

        });


@*Delete Rows on click*@
  function deleteRow(r) {
            var i = r.parentNode.parentNode.rowIndex;
            document.getElementById("PPE-table").deleteRow(i);
            document.getElementById("PPE-result-table").deleteRow(i);
        }

        function deleteRow2(r) {
            var i = r.parentNode.parentNode.rowIndex;
            document.getElementById("CapEx-table").deleteRow(i);
            document.getElementById("CapEx-results-table").deleteRow(i);

        }

        function deleteRow3(r) {
            var i = r.parentNode.parentNode.rowIndex;
            document.getElementById("WC-table").deleteRow(i);
            document.getElementById("WC-results-table").deleteRow(i);
        }

        function deleteRow4(r) {
            var i = r.parentNode.parentNode.rowIndex;
            document.getElementById("Turnover-table").deleteRow(i);
            document.getElementById("Turnover-results-table").deleteRow(i);
        }

Это CSS:

/*region Hover effect*/
.highlight {
    background-color: #e7e7e7 !important;
}

Двойное наведение работает с двумя таблицами строк (без добавления строк)

After adding rows on click button, hover does not work on the new added rows