JSFiddle - React, Tailwind, and code Playground

by Guruprasad Rao

HTML

<div class="base"> <!--Keep each group in base container-->
<table border="1"><tr>
    <td><select id="category0">
       <option value="1" data-price="10">Item 1 second</option>
       <option value="2" data-price="20">Item 2 second</option>
       <option value="3" data-price="30">Item 3 second</option>
    </select></td>
    <td><label>Dept. num:</label>
    <input type="text" class="deptip" id="dept-input"/><!--give them a class--></td>
    <td><label>Price:</label>
    <input type="text" class="priceip" id="price-input"/> <!--a class here too--></td>
    <td><label>Total:</label><input data-value="50" type="text" readonly class="total"/></td>
	<td><label>Total1:</label><input data-value="50" type="text" readonly class="total1"/></td>

</tr></table>
</div>

<div class="base"> <!--Keep each group in base container-->
<table border="1"><tr>
    <td><select id="category1">
       <option value="1" data-price="10">Item 1 second</option>
       <option value="2" data-price="20">Item 2 second</option>
       <option value="3" data-price="30">Item 3 second</option>
    </select></td>
    <td><label>Dept. num:</label>
    <input type="text" class="deptip" id="dept-input"/><!--give them a class--></td>
    <td><label>Price:</label>
    <input type="text" class="priceip" id="price-input"/> <!--a class here too--></td>
    <td><label>Total:</label><input data-value="50" type="text" readonly class="total"/></td>
	<td><label>Total1:</label><input data-value="50" type="text" readonly class="total1"/></td>

</tr></table>
</div>

<div class="base"> <!--Keep each group in base container-->
<table border="1"><tr>
    <td><select id="category2">
       <option value="1" data-price="10">Item 1 second</option>
       <option value="2" data-price="20">Item 2 second</option>
       <option value="3" data-price="30">Item 3 second</option>
    </select></td>
    <td><label>Dept. num:</label>
    <input type="text" class="deptip" id="dept-input"/><!--give them a class--></td>
   ...

CSS

input{
    float:right;
    margin-right:300px
}

JavaScript

$(document).ready(function(){
    $("select").on('change',function () {
        var dept_number = $(this).val();
        var price = $(this).find(':selected').data('price');
        $(this).closest('table').find('.deptip').val(dept_number);
        $(this).closest('table').find('.priceip').val(price);
        $(this).closest('table').find('.total').val(price * $(this).closest('table').find('.total').data('value'));
    });
});