JSFiddle - React, Tailwind, and code Playground

by Newton Anbarasu

HTML

<div class="row">
     <div class="col-md-4 fuel-details">
          <span class="icon icon-25 fuel_small"></span>
            <span  class="service_prev "> < </span>
         <div class="service_steps" step="1"  style="display: inline-block;">
            <input type="text" placeholder="Step 1">
         </div>
        <div class="service_steps" step="2"  style="display: inline-block;">
            <input type="text" placeholder="Step 2">
        </div>
        <div class="service_steps" step="3"  style="display: inline-block;">
            <input type="text" placeholder="Step 3">
        </div>
        <div class="service_steps" step="4"  style="display: inline-block;">
             <input type="text" placeholder="Step 4">
        </div>
        <div class="service_steps" step="5"  style="display: inline-block;">
             <input type="text" placeholder="Step 5">
        </div>
        <span class="service_next"> > </span>
        <button class="add-next-btn">save</button>
               
    </div>
    <div class="col-md-4 fuel-details">
       <span class="icon icon-25 service_small"></span>
        <span  class="service_prev"> < </span>
         <div class="service_steps" step="1" style="display: inline-block;" >
            <input type="text" placeholder="Step 1">
         </div>
        <div class="service_steps" step="2" style="display: inline-block;" >
            <input type="text"  placeholder="Step 2">
        </div>
        <div class="service_steps" step="3" style="display: inline-block;" >
            <input type="text" style="display: inline-block;" placeholder="Step 3">
        </div>
        <div class="service_steps" step="4" style="display: inline-block;" >
             <input type="text" placeholder="Step 4">
        </div>
        <div class="service_steps" step="5" style="display: inline-block;">
             <input type="text" placeholder="Step 5">
        </div>
        <span class="service_next"> > </span>
        <button...

CSS

.service_steps{margin-bottom:20px;}
body{padding:50px;}
span{cursor:pointer; font-size:22px; }
button{cursor:pointer; margin-left:15px;}
.service_prev{margin-right:15px;}
.service_next{margin-left:15px;}

JavaScript

$('.service_prev, .service_steps').hide();
    $('.fuel-details').find('.service_steps:first').show();
   /* $('.add-next-btn').prop('disabled', true);*/
   $('.service_steps').siblings('.add-next-btn').hide();
    $('.service_next').click(function(e) {

        e.preventDefault();
        service_prev = $(this).siblings('.service_prev');
        service_next = $(this);

        service_steps = $(this).siblings('.service_steps');
        var total_steps = service_steps.length
        var current = parseInt($(this).siblings('.service_steps:visible').attr('step'));

        $(service_steps[current-1]).hide();
        $(service_steps[current]).show();
 
        if(current == total_steps-1) {
            service_next.hide();
/*            $('.add-next-btn').prop('disabled', false);*/
             $(this).siblings('.add-next-btn').show();
        }
        else {
            service_next.show();
            $(this).siblings('.add-next-btn').hide();
        }
        if(current == 0) {
            service_prev.hide();
        } else {
            service_prev.show();
        }
    });

    $('.service_prev').click(function(e) {

        service_prev = $(this);
        service_next = $(this).siblings('.service_next'); 

        service_steps = $(this).siblings('.service_steps');
        var total_steps = service_steps.length
        var current = parseInt($(this).siblings('.service_steps:visible').attr('step'));

        $(service_steps[current-1]).hide();
        $(service_steps[current-2]).show();

        if(current == total_steps-1) {
            service_next.hide();
        }
        else {
            service_next.show();
            $(this).siblings('.add-next-btn').hide();
        }
        if(current == 1) {
            service_next.hide();
        } else {
            service_next.show();
        }
        if(current == 2) {
            service_prev.hide();
        } else {
            service_prev.show();
        }
    });