JSFiddle - React, Tailwind, and code Playground

by nyedidikeke

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- open up your developer console to see the result
Keyboard shortcut for a Google Chrome Browser: Ctrl + Shift + i -->
<form id="itemDetails">
<!-- grouping all fieldset under a form element with an assigned id where
they can all be hierarchically referenced for precision where needed -->
    <fieldset id="itemInformation">
        <h2>Items</h2>
        <div class="itemGroup">
            <input type="number" id="item1Name" placeholder="0.00" class="itemNames" name="item1Name">
        </div>
        <div class="itemGroup">
            <input type="number" id="item2Name" placeholder="0.00" class="itemNames" name="item2Name">
        </div>
        <div class="itemGroup">
            <input type="number" id="item3Name" placeholder="0.00" class="itemNames" name="item3Name">
        </div>

        <div class="changeNumber">
            <button class="increase">&#43;</button>
            <button class="decrease">&#8211;</button>
        </div>
        <div class="buttons">
            <button class="previousButton btn">Previous</button>
            <button class="nextButton btn">Next</button>
        </div>
    </fieldset>
    <!-- other fieldset as necessary and harvest their input separately in
    a similar fashion as done with the first one itemInformation -->
    <fieldset id="itemOrigin">
        <!-- itemOrigin label and input fields -->
    </fieldset>
    <fieldset id="itemDestination">
        <!-- itemDestination label and input fields -->
    </fieldset>
</form>

JavaScript

$('#itemInformation .nextButton').bind('click', function (event) {
    event.preventDefault();
    console.table($('#itemInformation').serializeArray());
    //console.log($('#itemInformation').serializeArray());
});