我正在一个网站上与BE开发人员合作-他们已经在Umbraco中构建了它，每个内容部分都有动态块，可以添加到页面中。
我们的客户端试图在一个页面上添加相同的“选项卡式内容”块两次，但是第二个块不起作用，因为JS只是针对它在类中找到的第一个元素
有没有办法修改JS，让两个模块独立工作？下面是一个简化的演示：

$('section.tabs nav li').click(function(){
    var tabIndex = $(this).index();
    $(this).addClass('active').siblings().removeClass('active');

    $('section.tabs ul.tabs li.tab').eq(tabIndex).addClass('active').siblings().removeClass('active');
});

section.tabs main.tabsContainer ul.tabs li.tab{
    display:none;
}

section.tabs main.tabsContainer ul.tabs li.tab.active{
    display:flex;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>
  First Tabbed Section
</h1>
<section class="tabs">
      <nav>
          <ul>
              <li class="active">
                  <button>
                      Click for Tab 1
                  </button>
              </li>
              <li>
                  <button>
                      Click for Tab 2
                  </button>
              </li>
              <li>
                  <button>
                      Click for Tab 3
                  </button>
              </li>
          </ul>
      </nav>
      <main class="tabsContainer">
          <ul class="tabs">
              <li class="tab active">
                  <h2>
                      Tab 1
                  </h2>
              </li>
              <li class="tab">
                  <h2>
                      Tab 2
                  </h2>
              </li>
              <li class="tab">
                  <h2>
                      Tab 3
                  </h2>
              </li>
          </ul>
      </main>
</section>

<hr />

<h1>
  Second Tabbed Section
</h1>
<section class="tabs">
      <nav>
          <ul>
              <li class="active">
                  <button>
                      Click for Tab 1
                  </button>
              </li>
              <li>
                  <button>
                      Click for Tab 2
                  </button>
              </li>
              <li>
                  <button>
                      Click for Tab 3
                  </button>
              </li>
          </ul>
      </nav>
      <main class="tabsContainer">
          <ul class="tabs">
              <li class="tab active">
                  <h2>
                      Tab 1
                  </h2>
              </li>
              <li class="tab">
                  <h2>
                      Tab 2
                  </h2>
              </li>
              <li class="tab">
                  <h2>
                      Tab 3
                  </h2>
              </li>
          </ul>
      </main>
</section>