JSFiddle - React, Tailwind, and code Playground

HTML

<!-- Modify the existing DIV elements and write jQuery code that will add N new item elements, make the trash button visible, and make the action of the trash button to delete its item. All INPUT elements have to be uniquely identifiable so they are useful for back-end developers. Do not create new DIV elements from scratch, just modify attributes of the existing ones. -->
<div id="items">
    <div class="formfield item">
        <label>Item:</label>
        <div>
            <input type="text" name="" placeholder="Item description" />
        </div>
        <div>
            <input type="text" name="" placeholder="$50.00" /> <a class="button-trash">delete</a>

        </div>
    </div>
    <div class="formfield">
        <div> <a class="actionbutton" id="add_item">Add Item</a> 
        </div>
    </div>
</div>

CSS

.actionbutton {
    float:left;
    margin:10px;
    padding:5px;
    background-color: #80B83F;
    cursor: pointer;
}
.button-trash {
    padding:5px;
    width:20px;
    background-color: #DD9334;
    cursor: pointer;
}

JavaScript

// keep track of the number of items
var numItems = 1;
var baseId = 'item' + numItems;

// add unique IDs for the input fields
function addInputFieldID(index, suffix) {
    $('#' + baseId + ' input')
        .eq(index)
        .attr('id', baseId + suffix);
}

// add IDs to the first item
$('#items > .formfield:first').attr('id', 'item' + numItems);
addInputFieldID(0, '-descr');
addInputFieldID(1, '-price');

// duplicate items by adding them to the end
$("#add_item").click(function () {

    numItems++;
    baseId = 'item' + numItems;

    $(".item:first")
        .clone()
        .attr('id', baseId)
        .insertAfter("#items > .item:last");

    addInputFieldID(0, '-descr');
    addInputFieldID(1, '-price');

    // add click handler to remove this item
    $('.button-trash').click(function () {
        $(this).parent().parent().remove();
    });

});