Custom Jquery Steps 1,2,3 Section

<div class="steps active" id="content1">
</div>

<div class="steps" id="content2">
</div>

<div class="steps" id="content3">
</div>


<!-- NEXT PREV BUTTON LOGIC -->
<div class="form-row row">
    <div class="col-6">
        <div class="text-start">
            <a id="prev" class="btn btn-lg btn-dark">Previous</a>
        </div>
    </div>
    <div class="col-6">
        <div class="text-end">
            <a id="next" class="btn btn-lg btn-dark">Next</a>
            <button id="lastSubmit" type="submit" class="btn btn-lg btn-primary">Submit</button>
        </div>
    </div>
</div>
<!-- NEXT PREV BUTTON LOGIC -->



<style>
    .steps { display: none; }
    .steps.active { display: block; }
    button { display: inline-block; margin: 5px; }
</style>


<script>
	//NEXT AND PREVIOUS CONDITION;
	$(document).ready(function(){
	    var currentIndex = 0;
	    var contents = $('.steps');
	    var contentCount = contents.length;

	    function updateButtons() {
	        $('#prev').toggle(currentIndex > 0);
	        $('#next').toggle(currentIndex < contentCount - 1);
	        $('#lastSubmit').toggle(currentIndex === contentCount - 1);
	    }

	    $('#next').click(function(){
	        if (currentIndex < contentCount - 1) {
	            $(contents[currentIndex]).removeClass('active');
	            currentIndex++;
	            $(contents[currentIndex]).addClass('active');
	            updateButtons();
	        }
	    });

	    $('#prev').click(function(){
	        if (currentIndex > 0) {
	            $(contents[currentIndex]).removeClass('active');
	            currentIndex--;
	            $(contents[currentIndex]).addClass('active');
	            updateButtons();
	        }
	    });

	    updateButtons();
	});
</script>