Searching problem in multiple table on single page

[HamidRahman]

I am using three table on single page. When I search table data in the first table it work. But when I search in the second and third table it does not filter the respective table data. Here is my all three tables code```

       <div class="panel">
        <header class="panel-heading">
          <h3 class="panel-title">Non Subscribed Students</h3>
        </header>
        <div class="panel-body">
          <table class="table table-bordered table-hover toggle-circle" id="exampleFootableFiltering">
            <thead>
              <tr>
                <th data-toggle="true">Name</th>
                <th data-hide="phone, tablet">Subscription</th>
                <th data-hide="phone, tablet">ID</th>
                <th data-hide="phone, tablet">Catagory</th>
                <th data-hide="phone, tablet">QA</th>
                <th data-hide="phone, tablet">History</th>
                <th data-hide="phone, tablet">Rank</th> 
                <th data-hide="phone, tablet">Options</th>
              </tr>
            </thead>
            <div class="form-inline padding-bottom-15">
              <div class="row">
                <div class="col-sm-6">
                  <div class="form-group"> 
                    <select disabled id="filteringStatus" class="form-control">
                      <option  value="">Show all</option>
                    </select>
                  </div>
                </div>
                <div class="col-sm-6 text-right">
                  <div class="form-group">
                    <input id="filteringSearch" type="text" placeholder="Search" class="form-control"
                    autocomplete="off">
                  </div>
                </div>
              </div>
            </div>
            <tbody>

                    <tr class="text-center">
                      <td>Junaid Iqbal</td>
                      <td><span class="text-danger">Non Subscriber</span></td>
                      <td ><span class="btn btn-round btn-info btn-xs waves-round">15349</span></td>
                      <td>Pre-Medical</td>
                      <td ><span class="btn btn-round btn-info btn-xs waves-round">35</span></td>
                      <td><a href="#">View</a></td>
                      <td ><span class="btn btn-round btn-info btn-xs waves-round">3</span></td> 
                      <td>
                        <button class="btn btn-round btn-primary btn-xs waves-round ">Message</button> 
                        <button class="btn btn-round btn-primary btn-xs waves-round margin-left-10">Edit</button>
                      </td>
                    </tr> 
            </tbody>
            <tfoot>
              <tr>
                <td colspan="9">
                  <div class="text-right">
                    <ul class="pagination"></ul>
                  </div>
                </td>
              </tr>
            </tfoot>
          </table>
        </div>
      </div> 

       <div class="panel">
        <header class="panel-heading">
          <h3 class="panel-title">Subscribed Students</h3>
        </header>
        <div class="panel-body">
          <table class="table table-bordered table-hover toggle-circle" id="exampleFootableFiltering">
            <thead>
              <tr>
                <th data-toggle="true">Name</th>
                <th data-hide="phone, tablet">Subscription</th>
                <th data-hide="phone, tablet">ID</th>
                <th data-hide="phone, tablet">Catagory</th>
                <th data-hide="phone, tablet">QA</th>
                <th data-hide="phone, tablet">History</th>
                <th data-hide="phone, tablet">Rank</th> 
                <th data-hide="phone, tablet">Options</th>
              </tr>
            </thead>
            <div class="form-inline padding-bottom-15">
              <div class="row">
                <div class="col-sm-6">
                  <div class="form-group"> 
                    <select disabled id="filteringStatus" class="form-control">
                      <option  value="">Show all</option>
                    </select>
                  </div>
                </div>
                <div class="col-sm-6 text-right">
                  <div class="form-group">
                    <input id="filteringSearch" type="text" placeholder="Search" class="form-control"
                    autocomplete="off">
                  </div>
                </div>
              </div>
            </div>
            <tbody>

                    <tr class="text-center">
                      <td>Wasil Khan</td>
                      <td><span class="text-success">Subscriber</span></td>
                      <td ><span class="btn btn-round btn-info btn-xs waves-round">1203</span></td>
                      <td>Pre-Medical</td>
                      <td ><span class="btn btn-round btn-info btn-xs waves-round">35</span></td>
                      <td><a href="#">View</a></td>
                      <td ><span class="btn btn-round btn-info btn-xs waves-round">3</span></td> 
                      <td>
                        <button class="btn btn-round btn-primary btn-xs waves-round ">Message</button> 
                        <button class="btn btn-round btn-primary btn-xs waves-round margin-left-10">Edit</button> 
                      </td>
                    </tr> 
            </tbody>
            <tfoot>
              <tr>
                <td colspan="9">
                  <div class="text-right">
                    <ul class="pagination"></ul>
                  </div>
                </td>
              </tr>
            </tfoot>
          </table>
        </div>
      </div>

       <div class="panel">
        <header class="panel-heading">
          <h3 class="panel-title">Expired Students</h3>
        </header>
        <div class="panel-body">
          <table class="table table-bordered table-hover toggle-circle" id="exampleFootableFiltering">
            <thead>
              <tr>
                <th data-toggle="true">Name</th>
                <th data-hide="phone, tablet">Subscription</th>
                <th data-hide="phone, tablet">ID</th>
                <th data-hide="phone, tablet">Catagory</th>
                <th data-hide="phone, tablet">QA</th>
                <th data-hide="phone, tablet">History</th>
                <th data-hide="phone, tablet">Rank</th> 
                <th data-hide="phone, tablet">Options</th>
              </tr>
            </thead>
            <div class="form-inline padding-bottom-15">
              <div class="row">
                <div class="col-sm-6">
                  <div class="form-group"> 
                    <select disabled id="filteringStatus" class="form-control">
                      <option  value="">Show all</option>
                    </select>
                  </div>
                </div>
                <div class="col-sm-6 text-right">
                  <div class="form-group">
                    <input id="filteringSearch" type="text" placeholder="Search" class="form-control"
                    autocomplete="off">
                  </div>
                </div>
              </div>
            </div>
            <tbody>

                    <tr class="text-center">
                      <td>John Doe</td>
                      <td><span class="text-warning">Expired</span></td>
                      <td ><span class="btn btn-round btn-info btn-xs waves-round">2253</span></td>
                      <td>Pre-Medical</td>
                      <td ><span class="btn btn-round btn-info btn-xs waves-round">35</span></td>
                      <td><a href="#">View</a></td>
                      <td ><span class="btn btn-round btn-info btn-xs waves-round">3</span></td> 
                      <td>
                        <button class="btn btn-round btn-primary btn-xs waves-round ">Message</button> 
                        <button class="btn btn-round btn-primary btn-xs waves-round margin-left-10">Edit</button>
                      </td>
                    </tr> 
            </tbody>
            <tfoot>
              <tr>
                <td colspan="9">
                  <div class="text-right">
                    <ul class="pagination"></ul>
                  </div>
                </td>
              </tr>
            </tfoot>
          </table>
        </div>
      </div>

{{-- End of Expired Student List --}}

[kip-13]

The problem is because you have the table with same ID and when you initialize this the plugin only get one of this elements, check this:

https://github.com/fooplugins/FooTable/blob/V3/src/js/FooTable.js#L53

F.get = function(table){
    return $(table).first().data('__FooTable__');
};