JSFiddle - React, Tailwind, and code Playground

by kodedsoft

HTML

<button type="submit" class="btn btn-home btn-cta" name= "btn-save1" id= "btn-save1"  required="required">Save1</button>
<button type="submit" class="btn btn-home btn-cta" name= "btn-save2" id= "btn-save2" disabled="disabled" required="required">Save2</button>
<button type="submit" class="btn btn-home btn-cta" name= "btn-save3" id= "btn-save3" disabled="disabled" required="required">Save3</button>
<button type="submit" class="btn btn-home btn-cta" name= "btn-save4" id= "btn-save4" disabled="disabled" required="required">Save4</button>
<button type="submit" class="btn btn-home btn-cta" name= "btn-save5" id= "btn-save5" disabled="disabled" required="required">Save5</button>
<input type="submit" class="btn btn-home" name= "add_resume1" id= "add_resume1" value="submit" >
<br/>

OR
<br/>

<button type="submit" class="btn btn-home btn-cta2" name= "btn-save11" id= "btn-save11"  required="required">Save1</button>
<button type="submit" class="btn btn-home btn-cta2" name= "btn-save12" id= "btn-save12" disabled="disabled" required="required">Save2</button>
<button type="submit" class="btn btn-home btn-cta2" name= "btn-save13" id= "btn-save13" disabled="disabled" required="required">Save3</button>
<button type="submit" class="btn btn-home btn-cta2" name= "btn-save14" id= "btn-save14" disabled="disabled" required="required">Save4</button>
<button type="submit" class="btn btn-home btn-cta2" name= "btn-save15" id= "btn-save15" disabled="disabled" required="required">Save5</button>

JavaScript

$('document').ready(function() {
    
    $("#add_resume1").on("click", function(e) { 
        var size = $(".btn-cta").size()-1;
        var enabled = $( ".btn-cta:enabled" ).next();
        // remove the next line if u donot want it to be cyclic
        if(enabled.index()> size) enabled = $( ".btn-cta" ).eq(0);
        $(".btn-cta").prop("disabled",true);
        $(enabled).prop("disabled",false);
        

    });

    $(".btn-cta2").on("click", function(e) { 
    
        var enabled = $(this );
        $(".btn-cta2").prop("disabled",false);
        $(enabled).prop("disabled",true);
    
    });


    });