JSFiddle - React, Tailwind, and code Playground

HTML

<select id="category[0]">
    <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>
<select id="category[1]">
    <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" id="dept-input[0]"></input>
<br>
<br>
<label>Price:</label>
<input type="text" id="price-input[0]"></input>
<br>
<br>
<label>Dept. num:</label>
<input type="text" id="dept-input[1]"></input>
<br>
<br>
<label>Price:</label>
<input type="text" id="price-input[1]"></input>

JavaScript

var categories = $('select[id^=category]');
var deptNumbers = $('input[id^=dept-input]');
var priceNumbers = $('input[id^=price-input]');
categories.each(function(index) {
    $(this).change(function() {
        var dept_number = $(this).val();
        var price = $(this).find(':selected').data('price');
        deptNumbers.eq(index).val(dept_number);
        priceNumbers.eq(index).val(price);
    });
});