JSFiddle - React, Tailwind, and code Playground
HTML
<div class="col-xs-8">
<div style="display:inline-block">
<h3>Bank accounts </h3>
</div>
<div style="display:inline-block">
<button id="add_bank_acc_btn" type="button" class="btn btn-default glyphicon glyphicon-plus"> Add</button>
</div>
<table id="bank_accs_tbl" class="table table-striped">
<thead>
<th>ID</th>
<th>Bank type</th>
<th>Label</th>
<th>Currency</th>
<th>Min. transfer</th>
<th>Approved</th>
<th></th>
</thead>
</table>
</div>
</div>
JavaScript
$(document).ready(function () {
window.can_add_bank_row = true;
$('#add_bank_acc_btn').on('click', function () {
addBankAccRow();
});
});
/**
* Adds a table row with fields to add a bank account to the merchant's profile.
*/
function addBankAccRow() {
if (window.can_add_bank_row) {
var warning_msg = "You are about to add a new bank account for this merchant.\n\nAre you sure?";
$('<tr>' +
'<form method="POST" onsubmit=\"return confirm(\'' + warning_msg + '\');\">' +
'<td></td>' +
'<td><select id="bank_type_dropdown">' +
'<option value="international">International</option>' +
'<option value="sepa">SEPA</option>' +
'<option value="interac">Interac</option>' +
'<option value="paypal">PayPal</option>' +
'</select></td>' +
'<td><input name="add_bank_label_input" type="text"></td>' +
'<td><input name="add_bank_currency_input" type="text" style="width: 50px;"></td>' +
'<td><input name="add_bank_min_transfer_input" type="text" style="width: 80px;"></td>' +
'<td><input type="checkbox" name="add_bank_default" value="0"></td>' +
'<td><input type="checkbox" name="add_bank_approved" value="0"></td>' +
'<td><button type="submit" class="btn btn-primary">Add</button></td>' +
'</form>' +
'</tr>').insertBefore('#bank_accs_tbl > tbody > tr:first');
window.can_add_bank_row = false;
} else {
alert('You\'ve got one empty row to add a bank account already.\nPlease, fill and submit it before adding a new one. :)');
}
}