JSFiddle - React, Tailwind, and code Playground

by Guruprasad Rao

HTML

<div class="base">
    <select id="category">
       <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>
    <br/><br/>
    <label>Dept. num:</label>
    <input type="text" class="deptip" id="dept-input"/>
    <br/><br/>
    <label>Price:</label>
    <input type="text" class="priceip" id="price-input"/>
    <br/><br/>
    <label>Total:</label><input data-value="50" type="text" readonly class="total"/><br/>
</div>
<br/>

<div class="base">
    <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>
    <br/><br/>
    <label>Dept. num:</label>
    <input type="text" class="deptip" id="dept-input"/>
   <br/><br/>
    <label>Price:</label>
    <input type="text" class="priceip" id="price-input"/>
    <br/><br/>
    <label>Total:</label><input data-value="20" readonly type="text" class="total"/><br/>
</div>
<br/>

<div class="base">
    <select id="category2">
       <option value="1" data-price="10">Item 1 second</option>T
       <option value="2" data-price="20">Item 2 second</option>
       <option value="3" data-price="30">Item 3 second</option>
    </select>
    <br/><br/>
    <label>Dept. num:</label>
    <input type="text" class="deptip" id="dept-input"/>
    <br/><br/>
    <label>Price:</label>
    <input type="text" class="priceip" id="price-input"/>
   <br/><br/>
    <label>Total:</label><input readonly data-value="30" type="text" class="total"/><br/>
</div>

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).siblings('.deptip').val(dept_number);
        $(this).siblings('.priceip').val(price);
        $(this).siblings('.total').val(price * $(this).siblings('.total').data('value'));
    });
});