JSFiddle - React, Tailwind, and code Playground

by Claudius

HTML

<fieldset id='companyinfo'><legend>Company info</legend>
    
    <div class='input string optional'>
        <label for='company_navn' class='string optional'>Count</label>
        <input type='text' size='50' name='company[count]' id='company_navn' maxlength="255"  class='string optional' />
        <div class='button-row'>
            <button class='add'>Add info</button>
            <button class='remove'>Remove</button>
        </div>
    </div>
    
    <div class="input string optional">
        <label for="company_navn" class="string optional">Navn</label>
        <input type="text" size="50" name="company[navn]" maxlength="255" id="company_navn" class="string optional">
        <div class='button-row'>
            <button class='add'>Add info</button>
            <button class='remove'>Remove</button>
        </div>
    </div>    
</fieldset>

CSS

#companyinfo button.remove {
    display: none;
}

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', '#companyinfo').live('click', function(e) {
    $(this).parent().find('button.remove').show();
    $(this).hide();
    
    var element = $(this).parents('.input').find('input').last().clone().prop('value','');
      
    var name = element.prop('name');
    var pattern = new RegExp(/\[(.*?)\]/);
    var info = name.match(pattern)[1];
    var newname = name.replace(pattern, '[' + info + 'info' + ']');
    var newid = element.prop('id') + 'info';  
    
    element.prop('name', newname);
    element.prop('id', newid);    
    element.insertAfter($(this).parents('.input').find('input').last());
    
})
$('button.remove', '#companyinfo').live('click', function(e) {
    $(this).parent().find('button.add').show();
    $(this).hide();
    $(this).parents('.input').find('input').last().remove('input');
});