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>
    <label>Dept. num:</label>
    <input type="text" class="deptip" id="dept-input"/>
    <label>Price:</label>
    <input type="text" class="priceip" id="price-input"/>
</div>

<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>
    <label>Dept. num:</label>
    <input type="text" class="deptip" id="dept-input"/>
    <label>Price:</label>
    <input type="text" class="priceip" id="price-input"/>
</div>

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

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);
    });
});