JSFiddle - React, Tailwind, and code Playground

HTML

<div class="row">
    <div>
        <input class="handler1" type="radio"></input>
        <input class="handler1" type="text" disabled="disabled"></input>
    </div>
</div>
<div class="row">
    <div>
        <input class="handler2" type="radio"></input>
        <input class="handler2" type="text" disabled="disabled"></input>
    </div>
</div>
<div class="row">
    <div>
        <input class="handler3" type="radio"></input>
        <input class="handler3" type="text" disabled="disabled"></input>
    </div>
</div>

JavaScript

var tot_handlers = 7;

// Disable all but the $'(.Handler' + id) one
function enableHandler(id) {
    // disable all fields
    for (n = 1; n <= tot_handlers; n++) {
        $('input.handler' + n + '[type=text]').prop("disabled", true).css({
            "background-color": "rgb(251, 251, 251)",
            "border": "1px solid rgb(219, 219, 219)"
        });
    }
    // enable the good field
    $('input.handler' + id + '[type=text]').prop("disabled", false).css({
        "background-color": "rgb(255, 255, 255)",
            "border": "1px solid rgb(191, 191, 191)",
            "color": "rgb(191, 191, 191)"
    });
}

// Suggestion to get id id of the checked field
$('input[type=radio][class^=handler]').on('change', function(){
    var $checkedradio = $(this), id;
   for (n = 1; n <= tot_handlers; n++) { 
       if($checkedradio.is('.handler' + n)) { id = n; break; }
   }
   enableHandler(id);
});