JSFiddle - React, Tailwind, and code Playground

by Trey Hunner

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>
    <div class="wrapper">
        <div class="formfield">
            <label>Item:</label>
            <div>
                <input type="text" name="description" placeholder="Item description" />
            </div>
            <div>
                <input type="text" name="cost" placeholder="$50.00" /> <a class="button-trash" style="display:none;">del</a>

            </div>
        </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;
}
.button-trash {
    padding:5px;
    width:20px;
    background-color: #DD9334;
}

JavaScript

$(function () {
    $('#add_item').on('click', function () {
        var form = $('.formfield:first').clone();
        $('.wrapper').append(form);
        form.find('.description, .cost').val('');
        showDelete();
    });

    function showDelete() {
        if ($('.wrapper .formfield').length > 1) {
            $('.button-trash:not(:first)').show();
        } else {
            $('.button-trash').hide();
        }
    }
    $('.wrapper').on('click', '.button-trash', function () {
        var form = $(this).parents('.formfield');
        form.remove();
        showDelete();
    });
}());