how to disable and enable a nav tab in jquery in sequential form

i have sequential step-by-step form whereby upon submitting data in a form in one tab the user is the redirected to another tab.I have successfully been able to make such a function on the tab using jquery.upon submitting on the first tab the user the then redirected to another tab.the issue am getting is,on redirect the tab shows as blank but on inspecting elements i can find the all the elements in the sidebar elements tab.here is my html code and my jquery code the tabs html code

 <section id="tabs" class="project-tab">
   <div class="row">
     <div class="col-md-12">
       <nav>
         <div class="nav nav-tabs nav-fill" id="nav-tab" role="tablist">
           <a class="nav-item nav-link active payment-tab" id="nav-payment-tab" 
                                        data-toggle="tab" href="#nav-payment" role="tab" aria-controls="nav-payment" aria-selected="true">
              <span id="paydetails">1.</span>Payment Details
           </a>
           <a class="nav-item nav-link confirm-tab disabled" id="nav-confirm-tab"
                                        data-toggle="tab" href="#nav-confirm" role="tab" aria-controls="nav-confirm" aria-selected="false">
                                        <span id="confirmpay">2.</span>Confirm Payment
                                    </a>
                                    <a class="nav-item nav-link paid-tab disabled" id="nav-paid-tab" 
                                        data-toggle="tab" href="#nav-paid" role="tab" aria-controls="nav-paid" aria-selected="false">
                                        <span id="rentpaid">3.</span>Rent Paid</a>
                                </div>
                            </nav>
                            <div class="tab-content" id="nav-tabContent">
                                <div class="tab-pane fade show active" id="nav-payment" role="tabpanel" aria-labelledby="nav-payment-tab">
                                    <div class="row">
                                        <div class="col-md-12" style="border: 2px solid black;">
                                            <div class="card padding-card product-card" style="text-align: center; margin-top:20px;">
                                                <h3>Pay Your Rent With Mpesa</h3>
                                                <form action="javascript:void(0)" id="payrentwithmpesa" class="form-horizontal" role="form" method="POST">
                                                    @csrf
                                                    <div class="card-body">
                            
                                                        <div class="row">
                                                            <div class="col-md-9">
                                                                <label style="font-size: 20px;">Amount Of Rent To Pay</label>
                                                                <input type="number" class="form-control text-white bg-dark" name="rent_amount" id="rent_amount" value="{{ $userprofile->rentalhses->monthly_rent }}">
                                                            </div>
                                                        </div>
                            
                                                        <div class="row">
                                                            <div class="col-md-9">
                                                            <label style="font-size: 20px;">Phone Number</label>
                                                            <input type="number" class="form-control text-white bg-dark" name="phone_number" id="phonenumber" placeholder="Enter Phone Number To Charge">
                                                            </div>
                                                        </div>
                            
                                                        <input type="text" class="form-control" name="user" id="user" value="{{ $userprofile->name }}" hidden>
                            
                                                        <div class="row section-groups mt-3">
                                                            <div class="col-md-12 text-center">
                                                                <button type="submit" class="btn btn-md btn-danger">Pay Rent</button>
                                                            </div>
                                                        </div>
                            
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="tab-pane fade" id="nav-confirm" role="tabpanel" aria-labelledby="nav-confirm-tab">
                                    <div class="row">
                                        <div class="col-md-12" style="border: 2px solid black;">
                                            <div class="card padding-card product-card confirmrentalpay" style="text-align: center; margin-top:20px;">
                                                <h3>Confirm The Rental Payment</h3>
                                                <form action="javascript:void(0)" id="payrentwithmpesa" class="form-horizontal" role="form" method="POST">
                                                    @csrf
                                                    <div class="card-body">
                            
                                                        <div class="row">
                                                            <div class="col-md-9">
                                                                <label style="font-size: 20px;">Transaction Code</label>
                                                                <input type="text" class="form-control text-white bg-dark" name="transactionid" id="transactionid" placeholder="Enter the Transaction code Sent Back In Your Mpesa Message.e.g QWERRYHSG ">
                                                            </div>
                                                        </div>
                            
                                                        <div class="row section-groups mt-3">
                                                            <div class="col-md-12 text-center">
                                                                <button type="submit" class="btn btn-md btn-danger">Submit</button>
                                                            </div>
                                                        </div>
                            
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="tab-pane fade" id="nav-paid" role="tabpanel" aria-labelledby="nav-paid-tab">
                                    <table class="table" cellspacing="0">
                                        <thead>
                                            <tr>
                                                <th>Project Name</th>
                                                <th>Employer</th>
                                                <th>Time</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td><a href="#">Work 1</a></td>
                                                <td>Doe</td>
                                                <td>[email protected]</td>
                                            </tr>
                                            <tr>
                                                <td><a href="#">Work 2</a></td>
                                                <td>Moe</td>
                                                <td>[email protected]</td>
                                            </tr>
                                            <tr>
                                                <td><a href="#">Work 3</a></td>
                                                <td>Dooley</td>
                                                <td>[email protected]</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

here is my jquery code

      var mpesapayurl = '{{ route("stkpush") }}'; 

        $("#payrentwithmpesa").on("submit",function(e){
            e.preventDefault();
            var mpesaform = $('#payrentwithmpesa')[0];
            var formdata=new FormData(mpesaform);
            $.ajax({
                url:mpesapayurl,
                type:"POST",
                processData:false,
                contentType:false,
                data:formdata,
                success:function(response){
                    $message="Kindly Check On Your Phone and Enter Mpesa Pin"
                    alertify.set('notifier','position', 'top-right');
                    alertify.success($message);

                    $('#nav-confirm-tab').removeClass("disabled").addClass("active");
                    $('#nav-payment-tab').removeClass("active").addClass("disabled");

                     //this is the code where the error occurs
                    $('#nav-payment').hide(); $('#nav-confirm').show()
                    
                },