JSFiddle - React, Tailwind, and code Playground

HTML

<form id="my_form" method="POST">
    Add a Book<br />

    <br />
    Your List: <br />
    <ul id="items">
    </ul>
    <br />
    <input type="button" value="Add Book" id="add_book_btn" />
    <input type="button" value="Add Cd" id="add_cd_btn" />
    <input type="button" value="Add Dvd" id="add_dvd_btn" />
    <br />
    <br />
    <br />
</form>

<br />

<div id="detail" style="display: none">
    Item Description: <br />
    <input type="text" name="item_desc" /><br />
    Item Price: <br />
    <input type="text" name="item_price" /><br />
    Item Qty: <br />
    <input type="text" name="item_qty" /><br />
    <input type="button" value="Add" id="insert_item" />
</div>

JavaScript

$("#add_book_btn").click(function(){
    $("input[name=book_desc], input[name=book_price], input[name=book_qty]").val("");
    $("#detail").fadeIn();
});

$("#insert_item").click(function(){
    var item = $("input[name=item_desc]").val();
    var price = $("input[name=item_price]").val();
    var qty = $("input[name=item_qty]").val();
    
    if(!item){
        alert("Please fill the field.");
        return;
    }
    
    var val = item + ";" + price + ";" + qty;
    
    $("#items").append("<li>" + val + "</li>");
    $("#my_form").append('<input type="hidden" name="items[]" value="' + val + '"/>');
    $("#detail").fadeOut();
});