JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tbody>
        <tr>
            <td>
            <select id="pname.1" multiple>
                <option data-price="11">11</option>
                <option data-price="21">21</option>
                <option data-price="31">31</option>
            </select>
            </td>
            <td>
            <input id="item_price.1" type="text" />
            </td>
        </tr>

        <tr>
            <td><select id="pname.2">
                <option data-price="12">12</option>
                <option data-price="22">22</option>
                <option data-price="32">32</option>
                </select></td>
            <td><input id="item_price.2" type="text" /></td>
        </tr>

        <tr>
            <td><select id="pname.3">
                <option data-price="13">13</option>
                <option data-price="23">23</option>
                <option data-price="33">33</option>
                </select></td><td>
            <input id="item_price.3" type="text" /></td>
        </tr>        
    </tbody>
</table>

JavaScript

$("table").on('change', "select[id^='pname']", function() {
    
    var $row = $(this).closest("tr"); 
    $row.find("input[id^='item_price']").val( $(this).find('option:selected').data("price") );
    
});