JSFiddle - React, Tailwind, and code Playground

by skram

HTML

<div id="rewards_container">
<table class="form right 40 rewardclone">
<tr>        
<td><label for="financial_goal_1">Amount</label></td>
<td>Pledge <span class="dollar">&#36;</span><input id="financial_goal_1" class="text dollars" type="text" name="financial_goal_1" /> or more</td>
</tr>
<tr>
    <td><label for="maximum_1">Maximum</label></td>
<td><input id="maximum_1" class="text dollars" type="text" name="maximum_1" /> available (blank for unlimited)</td>
</tr>
<tr>
<td><label for="reward_1">Reward:</label></td>
<td><textarea id="reward_1" name="reward_1"></textarea></td>
</tr>
</table>
</div>
<button id="add_reward">Add Reward</button>

JavaScript

$(function() {
    var rewardTableTmpl = '<table class="form right 40 rewardclone">' + 
        '<tr><td><label for="financial_goal_{NUM}">Amount</label></td>' +
                          '<td>Pledge <span class="dollar">&#36;</span><input id="financial_goal_{NUM}" class="text dollars" type="text" name="financial_goal_{NUM}" /> or more</td>' +
                          '</tr><tr>' +
                          '<td><label for="maximum_{NUM}">Maximum</label></td>' +
                          '<td><input id="maximum_{NUM}" class="text dollars" type="text" name="maximum_{NUM}" /> available (blank for unlimited)</td>' +
                          '</tr><tr>' +
                          '<td><label for="reward_{NUM}">Reward:</label></td>' +
                          '<td><textarea id="reward_{NUM}" name="reward_{NUM}"></textarea></td>' +
                          '</tr></table>';
        
    $('#add_reward').click(function() {
        $('#rewards_container').append(rewardTableTmpl.replace(/{NUM}/g, $('rewardclone').length + 1));
    });
});