jQuery first & prev .show ex

by VENKATA VINAY BYSANI

HTML

<div class="headerClass" style="display:none">One</div>
<div class="headerClass" style="display:none">Two</div>
<div class="headerClass" style="display:none">Three</div>
<div class="headerClass" style="display:none"> Foure</div>
<button id="prev">Previous</button>
<button id="next">Save & Next</button>
<input type="text" id="index"/>

JavaScript

$(function () {
    $(".headerClass").first().show();
    $("#next").click(function () {
        var currentElement = $(".headerClass:visible");
        $("#index").val($(".headerClass:visible").index());
        $(currentElement).hide();
        $(currentElement).next().show();

    });
    
    $("#prev").click(function () {
        
        var currentElement = $(".headerClass:visible");
        $("#index").val($(".headerClass:visible").index());
        // alert(currentElement);
        $(currentElement).hide();
        $(currentElement).prev().show();

    });
});