Laravel: Jquery how can I change the active class in tab?

Question

I have tab and it is dynamic. I'm getting the values in my database then I used it in my tab.

Example

I have 2 records it will look like this.

In every tab, it has different values. Having a problem changing my content of my tab, when I clicked the 2021 tab, my content did not change.

View

<ul class="nav nav-pills">
        <li class="nav-item" style="width: 10%">
            <a class="nav-link active accounting-period" id="{{ date('Y',strtotime($company->accounting_period_start)) }}" data-toggle="pill" href="#{{ date('Y',strtotime($company->accounting_period_start)) }}">{{ date('Y',strtotime($company->accounting_period_start)) }}</a>
        </li>
        <li class="nav-item" style="width: 10%">
            @foreach($previous_accounting_period as $key => $value)
            <a class="nav-link accounting-period" id="{{ date('Y',strtotime($value->accounting_period_start)) }}" data-toggle="pill" href="#{{ date('Y',strtotime($value->accounting_period_start)) }}">{{ date('Y',strtotime($value->accounting_period_start)) }}</a>
            @endforeach
        </li>
    </ul>
    <div class="tab-content">

        @foreach($previous_accounting_period as $key => $value)
        <div class="tab-pane" id="{{ date('Y',strtotime($value->accounting_period_start)) }}">
                <div class="row" style="margin-top: 20px;">
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
                        <div class="filters">
                            <h3>
                                <span class="pull-right">
                                    <button class="btn btn-primary btn-sm pr-general-filters" data-toggle="modal" data-target="#pr-general-filters" title="General Filters"><i class="fa fa-filter" aria-hidden="true"></i></button>
                                    <button class="btn btn-success btn-sm" data-toggle="modal" data-target="#pr-column-filters" title="Column Filters"><i class="fa fa-table" aria-hidden="true"></i></button>
                                    <form method="post" action="/reports/cost-center-report/exportPDF" target="_blank" style="display: inline">
                                        {{ csrf_field() }}
                                        <button type="submit" id="pdf-generator" class="btn btn-warning btn-sm" title="Export to PDF">
                                        <i class="fa fa-file-pdf-o" aria-hidden="true"></i>
                                        </button>
                                        <textarea style="display: none;" name="company_details" class="company-container"></textarea>
                                        <textarea style="display: none" name="pdf_value" id="pr-pdf-container"></textarea>
                                    </form>
                                    <a class="btn btn-danger btn-sm" id="pr-export-csv" title="Export to CSV" target="_blank"><i class="fa fa-file-excel-o" aria-hidden="true"></i></a>
                                </span>
                                <br>
                            </h3>
                        </div>
                    </div>
                    <div class="col-md-12 pr-items-details">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="table-responsive get-cost-center-table">
                                    <table  class="table table-hover table-bordered table-sm purchase-requisitions-table" id="transactions">
                                        <thead class="thead-global">
                                            <tr>
                                               <th>TEST</th>
                                               <th>TEST</th>
                                               <th>TEST</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>TEST</td>
                                                <td>TEST</td>
                                                <td>TEST</td>
                                                <td>sss</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
        </div>
        @endforeach
    </div>

JS

$(".accounting-period").click(function (e) {
       var id           = this.id;
       if(!$(this).hasClass('active'))
        {
            $(".accounting-period.active").removeClass("active");
            $(this).addClass("active");        

        }
        if(!$('.tab-pane #'+id).hasClass('active'))
        {
            $('.tab-pane #'+id).removeClass("active");
            $('.tab-pane #'+id).addClass("active");
        }

       e.preventDefault();
       return false;
   });

Question: How can I put active and remove class to change my content of my table?

Answer 1

Your script is working fine as I have check in my system, meanwhile you check check with the below one, I have tweaked a little in your script.

 $(document).on("click",".accounting-period",function (e) { e.preventDefault(); var id = $(this).attr("id"); $('th#pr_sequence_no_seq1-'+id).text(id); $('th#pr_sequence_no_seq2-'+id).text(id); if(!$(this).hasClass('active')){ $(".accounting-period.active").removeClass("active"); $(this).addClass("active"); } $(".tab-pane").removeClass("active"); $('div.tab-pane#'+id+"-div").addClass("active"); return false; });

 .active{ background:red; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul class="nav nav-pills"> <li class="nav-item" style="width: 10%"> <a class="nav-link accounting-period" id="2020" data-toggle="pill" href="#2020">2020</a> </li> <li class="nav-item" style="width: 10%"> <a class="nav-link accounting-period" id="2021" data-toggle="pill" href="#2021">2021</a> </li> </ul> <div class="tab-pane" id="2020-div"> <div class="row" style="margin-top: 20px;"> <div class="col-md-12 pr-items-details"> <div class="row"> <div class="col-md-12"> <div class="table-responsive get-cost-center-table"> <table class="table table-hover table-bordered table-sm purchase-requisitions-table" id="transactions-2020"> <thead class="thead-global"> <tr> <th id="pr_sequence_no_seq1-2020">Sequence No.</th> <th id="pr_sequence_no_seq2-2020">Sequence No.</th> </tr> </thead> <tbody> <tr> <td>wew</td> <td>sss</td> </tr> </tbody> </table> </div> </div> </div> </div> </div> </div> <div class="tab-pane" id="2021-div"> <div class="row" style="margin-top: 20px;"> <div class="col-md-12 pr-items-details"> <div class="row"> <div class="col-md-12"> <div class="table-responsive get-cost-center-table"> <table class="table table-hover table-bordered table-sm purchase-requisitions-table" id="transactions-2021"> <thead class="thead-global"> <tr> <th id="pr_sequence_no_seq1-2021">Sequence No.</th> <th id="pr_sequence_no_seq2-2021">Sequence No.</th> </tr> </thead> <tbody> <tr> <td>fff</td> <td>sss</td> </tr> </tbody> </table> </div> </div> </div> </div> </div> </div>