JSFiddle - React, Tailwind, and code Playground

HTML

<tr>
    <td>
        <select name='code[]' id='code1' style='width:100'>
            <option value=''>CHOOSE</option>
            <option value='1'>1</option>
            <option value='2'>2</option>
            <option value='3'>3</option>
            <option value='4'>4</option>
    </select>
    </td>
    <td>
        <input type='text' name='qty[]' id='qty1' style='text-align: center' readonly='readonly' />
    </td>
    <td>
        <input type='text' name='price[]' id='price1' style='text-align: right;' readonly='readonly' />
    </td>
    <td>
        <input type='text' name='total[]' id='total1' readonly='readonly' value='THIS SHOULD BE READONLY' />
    </td>
<tr>

JavaScript

$("[id^=code]").on('change',function(){

        var index = this.id.match(/\d+/)[0];
        var validate = $('#code'+index).val();

        if(validate != ''){
            $("#qty"+index).prop('readonly', false);
            $("#price"+index).prop('readonly', false);
        }

    });

    $("[id^=code]").on('change',function(){

        var index = this.id.match(/\d+/)[0];
        var validate = $('#code'+index).val();

        if(validate == ''){
            $("#qty"+index).prop('readonly', true);
            $("#price"+index).prop('readonly', true);
        }

    });