JSFiddle - React, Tailwind, and code Playground

by Rachel Blades

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="formfield">
        <label>Item: </label>
        <div>
            <input type="text" name="" placeholder="Item description" />
        </div>
        <div>
            <input type="text" name="" placeholder="$50.00" />
            <a class="button-trash" style="display:none;">del</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;
 }
.button-trash{
    padding:5px;
    width:20px;
    background-color: #DD9334;
}