JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="gfield_radio" id="input_10_2">
<li id='prev'><a href='#' class='prev'><</a></li>
<li class="gchoice_10_2_0">
<input name="amount" type="radio" value="$19" id="choice_10_2_0" required="" aria-required="true">
<label required="" for="choice_10_2_0" id="" onclick="getQuickTopupBonus($19,)" aria-required="true" class="checkedlabel">$19</label>

</li>
<li class="gchoice_10_2_1">
<input name="amount" type="radio" value="$23" id="choice_10_2_1" required="" aria-required="true">
<label required="" for="choice_10_2_1" id="" onclick="getQuickTopupBonus($23,)" aria-required="true" class="checkedlabel">$23</label>

</li>
<li class="gchoice_10_2_2">
<input name="amount" type="radio" value="$29" id="choice_10_2_2" required="" aria-required="true">
<label required="" for="choice_10_2_2" id="5" onclick="getQuickTopupBonus($29,5)" aria-required="true" class="checkedlabel">$29</label>

</li>
<li class="gchoice_10_2_3">
<input name="amount" type="radio" value="$35" id="choice_10_2_3" required="" aria-required="true">
<label required="" for="choice_10_2_3" id="10" onclick="getQuickTopupBonus($35,10)" aria-required="true" class="checkedlabel">$35</label>

</li>
<li class="gchoice_10_2_4">
<input name="amount" type="radio" value="$39" id="choice_10_2_4" required="" aria-required="true">
<label required="" for="choice_10_2_4" id="10" onclick="getQuickTopupBonus($39,10)" aria-required="true" class="checkedlabel">$39</label>

</li>
<li class="gchoice_10_2_5">
<input name="amount" type="radio" value="$43" id="choice_10_2_5" required="" aria-required="true">
<label required="" for="choice_10_2_5" id="5" onclick="getQuickTopupBonus($43,5)" aria-required="true" class="checkedlabel">$43</label>

</li>
<li id='next'><a href='#' class='next'>></a></li>

</ul>

JavaScript

$(document).ready(function () {
    var $pagination = $('#input_10_2');
    var $lis = $pagination.find('li:not(#prev, #next)');
    $lis.filter(':gt(2)').hide();
    $lis.filter(':lt(3)').addClass('active');
    
    var $next = $("#next").click(function () {
        var idx = $lis.index($lis.filter('.active:last')) || 0;
        
        var $toHighlight = $lis.slice(idx + 1, idx + 5);
        if ($toHighlight.length == 0) {
            $prev.show();
            return;
        }
        
        $next.show();        
        $lis.filter('.active').removeClass('active').hide();
        $toHighlight.show().addClass('active')
    });
    
    var $prev = $("#prev").click(function () {
        var idx = $lis.index($lis.filter('.active:first')) || 0;
        
        var start = idx < 3 ? 0 : idx - 3;
        var $toHighlight = $lis.slice(start, start + 3);
        if ($toHighlight.length == 0) {
            $prev.hide();
            return;
        }      
        
        $next.show();
        $lis.filter('.active').removeClass('active').hide();
        $toHighlight.show().addClass('active')
    });
    
}); // close jquery