JSFiddle - React, Tailwind, and code Playground

by Claudius

HTML

<div id="ekc_data_SECTOR" class="comp_data" style="display: block;">
    <p>bla bla</p>
    <h3>bla</h3>
    
    
    <div class="kc_userinput">
        <input type="text" title="t" value="v" id="id" name="n" class="comp_title" autocomplete="off" style="" />
        <span class="kc_buttons">
            <a class='add' title="Tilføj alternativ uddannelse" href="?add">
                <span class="imgAddKC">add</span>
            </a>
            <a class='remove' title="Fjern alternativ uddannelse" href="?remove">
                <span class="imgRemoveKC">remove</span>
            </a>
        </span>
    </div>
</div>

CSS

input {
    padding: 8px;
}


a {
    margin-left: 6px;
    vertical-align: middle;
}

JavaScript

$('.kc_buttons a.add').live('click', function(e) {
    e.preventDefault();
    var newName = $(this).parents('.kc_userinput').parent('.comp_data').prop('id').replace('_data_', '_textfield_');
    var count = $(this).parents('.kc_userinput').find('input').length;
    newName = newName + count;
    var newInput = $(this).parents('.kc_userinput').find('input').last().clone();
    newInput.prop('id', newName);
    newInput.prop('name', newName);
    newInput.prop('value', '');
    $(this).parents('.kc_userinput').append(newInput);


    $(this).parents('.kc_userinput').append($(this).parents('.kc_buttons').detach());
    newInput.focus();
    $(this).parents('.kc_buttons').find('a.remove').show();
    
});

$('.kc_buttons a.remove').live('click', function(e) {
    e.preventDefault();
    
    if ($(this).parents('.kc_userinput').find('input').length > 1) {
        $(this).parents('.kc_userinput').find('input').last().remove();
    }
    if ($(this).parents('.kc_userinput').find('input').length == 1) {
      $(this).parents('.kc_buttons').find('a.remove').hide();
    }
   
});