Я хочу перейти к следующему li href нажатием кнопки "Далее"

Question

   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<div class="panel panel-body" style="min-height:256px">

        <div class="col-md-3" id="mypartialviewdiv">



<div class="panel panel-default">
    <div class="panel-heading">
        <h4>Steps to Approve Plans</h4>
    </div>
    <div class="panel-body" id="social">
        <ul id="gallery" class="list-group selectedul"><li data-index="0" id="listitem" class="list-group-item"><a list-link="1" id="myreflink" href="/User/BusinessPlanSummary" class="btn btn-primary btn-block">Step 1: Business Plan Summary</a></li><li data-index="1" id="listitem" class="list-group-item"><a list-link="2" id="myreflink" href="/User/BindGrids?type=1" class="btn btn-primary btn-block">Step 2: P&amp;L Details</a></li><li data-index="2" id="listitem" class="list-group-item"><a list-link="3" id="myreflink" href="/User/BindGrids?type=2" class="btn btn-primary btn-block">Step 3: Balance Sheet Details</a></li><li data-index="3" id="listitem" class="list-group-item"><a list-link="4" id="myreflink" href="/User/ApprovalPlans?type=1&amp;approve=2" class="btn btn-primary btn-block">Step 4: Final Step</a></li></ul>
    </div>



</div>

    <a id="mynextlink" class="nextspan">Next</a>

<style>
.nextspan {
            font-size: 22px;
        }</style>
<script>
    $(document).ready(function () {
        function PopulateLi() {


            var jsonData = JSON.stringify({
                //'PlanId': PlanId,
                //'CompanyId': CompanyId
            });
            $.ajax({
                type: "Get",
                url: "/User/getmenus",
                async: false,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                data: jsonData,
                success: function (data) {

                    //var s = '<option value="-1">Please Select Category</option>';
                    var s = "";
                    var j = 1;


                    for (var i = 0; i < data.length; i++) {

                        s += '<li data-index="' + i +'" id="listitem" class="list-group-item"><a list-link="' + j + '" id="myreflink" href= "' + data[i].Link + '" class="btn btn-primary btn-block">' + data[i].LinkName + '</a></li>';

                        j++;

                    }

                    $("#gallery").html(s);
                    $(document).ready(function () {

                        $('.panel').on('click', '.list-group li', liClicked);
                    });
                    function liClicked(event) {

                        if ($(event.currentTarget).data('index') != data.length) {
                            $('.selectedul li').eq($(event.currentTarget).data('index') + 1).addClass('disabledClass') // This can be done in loop for all the following li's. This will just disable the immediate li. But you get the idea. 
                        }

                    }

                },
                error: function (msg) {

                }
            });

        }
    });
</script>

Я хочу, чтобы следующая кнопка выше могла переходить к следующей ссылке li при нажатии. Так как я новичок в этом, мне нужна помощь относительно того, как этого добиться. Будем признательны за хорошие ответы. не могу понять, как это получить. Я реализовал код в этой ссылке на скрипач https://jsfiddle.net/60y8Lqcu/ Помогите мне с решением