JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<button id="clone">
Clone Row
</button>
<div id="rows">
<div class="row" id="rowsec">
<div class="col-md-2 col-sm-3 col-lg-1 nopadding">
<input class="form-control input-sm nopadding" type="text" placeholder="Floor" maxlength="4" name="floor">
</div>
<div class="col-md-2 col-sm-3 col-lg-1 nopadding">
<input class="form-control input-sm nopadding" type="text" placeholder="Length" maxlength="4" name="length">
</div>
<div class="col-md-2 col-sm-3 col-lg-1 nopadding">
<input class="form-control input-sm nopadding" type="text" placeholder="Width" maxlength="4" name="width">
</div>
<div class="col-md-2 col-sm-3 col-lg-1 nopadding">
<input class="form-control input-sm nopadding" type="text" placeholder="Sqft" maxlength="4" name="sqft">
</div>
</div>
</div>
JavaScript
/**
* Create a clone of the row template and add it to the #rows container.
*/
function cloneRow(){
//Clone the entire row
var $clone = $('#rowsec').clone();
//Clear the input values. Customize this if needed
$clone.find('input').val(0);
//Remove the ID so there's only one in the dom.
$clone.removeAttr('id');
//Add it to the rows container
$('#rows').append($clone);
}
/**
* Handle a change event. Within the function `this` refers to the input that changed
* We can use jQuery to find the other inputs based on the changed input
* then run the calculations.
*/
function compute(){
var $row = $(this).closest('.row');
var $floor = $row.find('[name=floor]');
var $length = $row.find('[name=length]');
var $width = $row.find('[name=width]');
var $sqft = $row.find('[name=sqft]');
//Do your calculations
$sqft.val($length.val() * $width.val());
}
//Clone row when button is clicked
$('#clone').click(cloneRow);
//Handle change events in each row
$('#rows').on('change', 'input', compute);