JSFiddle - React, Tailwind, and code Playground

HTML

<table id="sortable_offer_table">
    <tr>
        <td><div>My Text</div></td>
        <td><div>My Other Text</div></td>
        <td><div>My Final Text</div></td>
    </tr>
    <tr>
        <td><div>My Text</div></td>
        <td><div>My Other Text</div></td>
        <td><div>My Final Text</div></td>
    </tr>
    <tr>
        <td><div>My Text</div></td>
        <td><div>My Other Text</div></td>
        <td><div>My Final Text</div></td>
    </tr>
</table>

<br/><br/>

<button type="button" id="create_blank_scenario">Create Blank</button>

CSS

.editable { background: yellow; }

td { padding: 5px; }

JavaScript

$(function() {
    $("#create_blank_scenario").click(function() {
        var row = $('#sortable_offer_table tbody tr:first').clone(true);

        row.find("td div").addClass("editable");

        row.insertBefore('#sortable_offer_table tbody tr:first');
    });

});