JSFiddle - React, Tailwind, and code Playground

by Sean Wessell

HTML

<div class="container">
  <h2>Pagination - site</h2>
  <ul class="pagination">
    <li><a data-toggle="tab" href="#tab1">1</a></li>
    <li><a data-toggle="tab" href="#tab2">2</a></li>
    <li><a data-toggle="tab" href="#tab3">3</a></li>
  </ul>
</div>
<div id="tabcont" class="tab-content">
  <div id="tab1" class="tab-pane">name1</div>
  <div id="tab2" class="tab-pane">name2</div>
  <div id="tab3" class="tab-pane">name3</div>
  <div id="tab4" class="tab-pane">name4</div>
  <div id="tab5" class="tab-pane">name5</div>
</div>

JavaScript

var i = null;
  $(document).on('click', 'a[data-toggle="tab"]', function() {
    console.log(i);
    console.log($(this).text());
    if ($(this).text() >= 3) {
      if (i < 3 || i === null) {
        $('.pagination').html('<li><a data-toggle="tab" href="#tab2">2</a></li><li><a data-toggle="tab" href="#tab3">3</a></li><li><a data-toggle="tab" href="#tab4">4</a></li><li><a data-toggle="tab" href="#tab5">5</a></li>');
      }
      i = $(this).text();

    } else {
      if (i >= 3 || i === null) {
        $('.pagination').html('<li><a data-toggle="tab" href="#tab1">1</a></li><li><a data-toggle="tab" href="#tab2">2</a></li><li><a data-toggle="tab" href="#tab3">3</a></li>');
      }
      i = $(this).text();
    }
  });