JSFiddle - React, Tailwind, and code Playground

HTML

<input type="radio" name="number" class="radio-number" data-number="1" checked>
<input type="radio" name="number" class="radio-number" data-number="2">
<input type="radio" name="number" class="radio-number" data-number="3">
<input type="radio" name="number" class="radio-number" data-number="4">
<input type="radio" name="number" class="radio-number" data-number="5">
<input type="radio" name="number" class="radio-number" data-number="6">
<input type="text" class="pax hidden" id="input1">
<input type="text" class="pax hidden" id="input2">
<input type="text" class="pax hidden" id="input3">
<input type="text" class="pax hidden" id="input4">
<input type="text" class="pax hidden" id="input5">
<input type="text" class="pax hidden" id="input6">

CSS

.hidden {
    display:none;
}

JavaScript

$('.radio-number').on('change', function () {
    /*for (var i = 1; i <= 6; i++) {
        $('#input' + i).addClass('hidden');*/
    $('.pax').addClass('hidden');
    var n = $(this).data('number');
    for (var i = 1; i <= n; i++) {
        $('#input' + i).removeClass('hidden');
    }
});