JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="clearfix">
    <li>
        <div class="step-one circle">
            <p>Step 1</p>
        </div>
    </li>
    <li>
        <div class="step-two circle">
            <p>Step 2</p>
        </div>
    </li>
    <li>
        <div class="step-two circle">
            <p>Step 3</p>
        </div>
    </li>
</ul>

<div class="stepinstallment">
    <ul>
        <li id="step-one">
            <h2>Choose your document</h2>
            <div class="step-content">
                <label>
                    <input type="radio" id="option-1" name="options" value="1" />
                    <span>ID card and household registration</span>
                </label>
            </div>
        </li>

        <li id="step-two">
            <h2>Choose your document</h2>
            <div class="step-content">
                <label>
                    <input type="radio" id="option-1" name="options" value="1" />
                    <span>ID card and household registration</span>
                </label>
            </div>
        </li>

        <li id="step-three">
            <h2>Choose your document</h2>
            <div class="step-content">
                <label>
                    <input type="radio" id="option-1" name="options" value="1" />
                    <span>ID card and household registration</span>
                </label>
            </div>
        </li>
    </ul>
</div>

JavaScript

var sCircle = $('.steps ul li');

    $('input[type=radio]').on('click', function(){
       var liIndex=$(this).parents('li').index();
        if(liIndex>0){
            alert('error')
        }
        else{
            $('ul.clearfix>li:eq('+liIndex+')').css('background-color','red')
        }
    });