JSFiddle - React, Tailwind, and code Playground
HTML
<fieldset id='companyinfo'><legend>Company info</legend>
<div class='input string optional'>
<label for='company_count_1' class='string optional'>Count</label>
<input type='text' size='50' name='company_count_1' id='company_count' maxlength="255" class='string optional' />
<div class='button-row'>
<button class='add'>Add info</button>
<button disabled='disabled' class='remove'>Remove</button>
</div>
</div>
<div class="input string optional">
<label for="company_navn_1" class="string optional">Navn</label>
<input type="text" size="50" name="company_navn_1" maxlength="255" id="company_navn" class="string optional">
<div class='button-row'>
<button class='add'>Add info</button>
<button disabled='disabled' class='remove'>Remove</button>
</div>
</div>
</fieldset>
CSS
fieldset#companyinfo {
border: 3px double silver;
padding: 12px;
}
#companyinfo label {
display: block;
}
#companyinfo .button-row {
display: block;
text-align:right;
margin-top: 8px;
width: 332px;
}
#companyinfo input {
display: block;
width: 320px;
margin: 8px 0;
padding: 4px;
}
#companyinfo .input {
margin-bottom: 10px;
border: 1px dotted white;
padding: 10px;
background-color:#B1D853;
}
JavaScript
$('button.add').live('click', function(e) {
var element = $(this).parents('.input').find('input').last().clone().prop('value','yryry');
var counter = $(this).parents('.input').find('input').length + 1;
var newname = element.prop('id') + '_' + counter;
element.prop('name', newname);
element.insertAfter($(this).parents('.input').find('input').last());
$('button.remove').removeProp('disabled');
})
$('button.remove', '#companyinfo').live('click', function(e) {
$(this).parents('.input').find('input').last().remove('input');
if ($(this).parents('.input').find('input').length == 1) {
$(this).parents('.input').find('button.remove').prop('disabled', 'disabled');
}
});