JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container" id="first">
    <input type="text" id="1"><br>
    <span class="tip" style="display:inline">click here to activate next</span>   
</div>
    
<div class="container" id="second">
    <input type="text" id="2" disabled="disabled"><br>
        <span class="tip">click here to activate next</span>
</div>
    

<div class="container" id="third">
    <input type="text" id="3" disabled="disabled"><br>
    <span class="tip">click here to activate next</span>
</div>    
    
<div class="container" id="fourth">
    <input type="text" id="4" disabled="disabled"><br>
    <span class="tip">click here to activate next</span>
</div>

CSS

.container{
 min-height:20px;
 padding:10px;
 background:#F4F4F4;  
}
.tip{
display:none;    
color:#FF7800;
}

input[type="text"]{
  font-size:16px;
}

JavaScript

$(document).ready(function() {
   
     $("span").click(function(){
         if($(this).siblings("input").val()=="")
             alert("enter something to proceed");
         else{
             $(this).parent().next().children("span").show(); 
             $(this).parent().next().children("input").removeAttr("disabled");
         }
     });
 });