JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/leader-line/1.0.7/leader-line.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leader-line/1.0.7/leader-line.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/anim-event@1.0.17/anim-event.min.js"></script>
<ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item" role="presentation">
        <button class="nav-link active" id="weapon1-tab" data-bs-toggle="tab" data-bs-target="#wand" type="button" role="tab" aria-controls="wand" aria-selected="true">Wand</button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link" id="weapon2-tab" data-bs-toggle="tab" data-bs-target="#book" type="button" role="tab" aria-controls="book" aria-selected="false">Book</button>
    </li>
</ul>
<div class="tab-content p-5" id="myTabContent">
    <div class="tab-pane fade show active" id="wand" role="tabpanel" aria-labelledby="weapon1-tab" tabindex="0">
        <div class="d-flex gap-5">
            <div id="b1" style="background: red; height: 30px; width: 30px">1</div>
            <div id="b2" style="background: red; height: 30px; width: 30px">2</div>
            <div id="b3" style="background: red; height: 30px; width: 30px">3</div>
            <div id="b4" style="background: red; height: 30px; width: 30px">4</div>
            <div id="b5" style="background: red; height: 30px; width: 30px">5</div>
        </div>
    </div>
    <div class="tab-pane fade" id="book" role="tabpanel" aria-labelledby="weapon2-tab" tabindex="0">
        <div class="d-flex gap-5">
            <div id="b6" style="background: blue; height: 30px; width: 30px">1</div>
            <div id="b7" style="background: blue; height: 30px; width: 30px">2</div>
            <div id="b8"...

JavaScript

window.addEventListener("load", function () {
  // More game weapons available, I'm just using 2 (wand & book) as example

  const weaponLines = {
    wandLines: [],
    bookLines: [],
  }

  const weapons = {
    weapon1: document.getElementById("weapon1-tab").innerHTML.toLowerCase(),
    weapon2: document.getElementById("weapon2-tab").innerHTML.toLowerCase(),
  }

  var wand = document.getElementById("wand")
  var book = document.getElementById("book")

  if (wand) {
    weaponLines.wandLines = [
      new LeaderLine(
        document.getElementById("b1"),
        document.getElementById("b2"),
      ).setOptions({
        size: 3,
        color: "#333134",
        path: "straight",
      }),
      new LeaderLine(
        document.getElementById("b2"),
        document.getElementById("b3"),
      ).setOptions({
        size: 3,
        color: "#333134",
        path: "straight",
      })
    ]

    wand.addEventListener(
      "scroll",
      AnimEvent.add(function () {
        weaponLines.wandLines.forEach((element) => element.position())
      }),
      false,
    )
  }

  if (book) {
    weaponLines.bookLines = [
      new LeaderLine(
        document.getElementById("b8"),
        document.getElementById("b9"),
      ).setOptions({
        size: 3,
        color: "#333134",
        path: "straight",
      }),
      new LeaderLine(
        document.getElementById("b9"),
        document.getElementById("b10"),
      ).setOptions({
        size: 3,
        color: "#333134",
        path: "straight",
      }),
    ]

    wand.addEventListener(
      "scroll",
      AnimEvent.add(function () {
        weaponLines.bookLines.forEach((element) => element.position())
      }),
      false,
    )
  }

  console.log("First weapon: " + weapons.weapon1)
  console.log("Second weapon: " + weapons.weapon2)

  const tab = document.querySelector("#weapon2-tab")

  tab.addEventListener("show.bs.tab", (event) => {
    console.log("Show triggered")
    console.log("Hide: " +...