JSFiddle - React, Tailwind, and code Playground

HTML

<table id="customFields0" class="box-table-a" align="left">
    <thead>
        <tr>
            <th colspan="5" scope="col">Name</th>
            <th scope="col" align="Right"><a href="javascript:void(0)" id="addCF0">Add Row</a>
            </th>
        </tr>
    </thead>
</table>
<table id="customFields1" class="box-table-a" align="left">
    <thead>
        <tr>
            <th colspan="5" scope="col">Name</th>
            <th scope="col" align="Right"><a href="javascript:void(0)" id="addCF1">Add Row</a>
            </th>
        </tr>
    </thead>
</table>
<table id="customFields2" class="box-table-a" align="left">
    <thead>
        <tr>
            <th colspan="5" scope="col">Name</th>
            <th scope="col" align="Right"><a href="javascript:void(0)" id="addCF2">Add Row</a>
            </th>
        </tr>
    </thead>
</table>

CSS

table {
    border: 1px solid #ccc;
    width: 90%;
    margin-bottom: 10px;
}

JavaScript

var rowHtml = '<tr><td width="13%"><input type="text" name="godkant[]" class="fieldWidth" /></td><td width="11%" style="background:#b5dbe6"><input type="text" name="foreRengoring[]" class="fieldWidth" /></td><td width="12%" style="background:#e6b8b8"><input type="text" name="efterRengoring[]" class="fieldWidth" /></td><td width="12%" style="background:#c0d498" ><input type="text" name="borvarden[]" class="fieldWidth" /></td><td width="12%" style="background:#ffff66"><input type="text" name="injust[]" class="fieldWidth" /></td><td width="40%" ><input type="text" name="noteringar[]" class="fieldWidthNote" /></td></tr>';

$('.box-table-a a').click(function (evt) {
    evt.preventDefault();
    $(this).parents('table').append(rowHtml);
    return false;
});