<!DOCTYPE html>
<html>
<head>
  <title>NFL Quarterback Comparison Tool</title>
</head>
<body>
  <h1>NFL Quarterback Comparison Tool</h1>
  <input type="text" id="search-input" placeholder="Search NFL quarterbacks...">
  <button id="search-btn">Search</button>
  <h2>NFL Quarterbacks</h2>
  <ul id="nfl-quarterbacks-list">
    <li class="qb-list-item">Tom Brady</li>
    <li class="qb-list-item">Patrick Mahomes</li>
    <li class="qb-list-item">Aaron Rodgers</li>
    <li class="qb-list-item">Russell Wilson</li>
    <li class="qb-list-item">Deshaun Watson</li>
    <li class="qb-list-item">Dak Prescott</li>
    <li class="qb-list-item">Lamar Jackson</li>
    <li class="qb-list-item">Matthew Stafford</li>
    <li class="qb-list-item">Kyler Murray</li>
    <li class="qb-list-item">Justin Herbert</li>
  </ul>
  <div id="comparison-tabs">
    <div class="comparison-tab" id="career-stats-tab">Career Stats</div>
    <div class="comparison-tab" id="game-stats-tab">Game Stats</div>
    <div class="comparison-tab" id="athletic-scores-tab">Athletic Scores</div>
    <div class="comparison-tab" id="relevant-metrics-tab">Relevant Metrics</div>
  </div>
  <div id="selected-players">
    <h2>Selected Players</h2>
    <ul id="selected-players-list"></ul>
  </div>

  <script>
    // Add click event listener to NFL quarterbacks list
    const nflQuarterbacksList = document.getElementById("nfl-quarterbacks-list");
    nflQuarterbacksList.addEventListener("click", (event) => {
      const selectedPlayer = event.target.textContent;
      const selectedPlayersList = document.getElementById("selected-players-list");
      const listItem = document.createElement("li");
      listItem.textContent = selectedPlayer;
      selectedPlayersList.appendChild(listItem);
    });

    // Add click event listener to comparison tabs
    const comparisonTabs = document.getElementById("comparison-tabs");
    comparisonTabs.addEventListener("click", (event) => {
      // Reset active class from all comparison tabs
      const comparisonTabItems = comparisonTabs.getElementsByClassName("comparison-tab");
      for (let i = 0; i < comparisonTabItems.length; i++) {
        comparisonTabItems[i].classList.remove("active");
      }
      // Add active class to clicked comparison tab
      event.target.classList.add("active");
    });

    // Add click event listener to search button
    const searchBtn = document.getElementById("search-btn");
    searchBtn.addEventListener("click", () => {
      const searchInput = document.getElementById("search-input");
      const searchTerm = searchInput.value.toLowerCase();
      const nflQuarterbacks = document.getElementsByClassName("qb-list-item");
      // Hide all NFL quarterbacks initially
      for (let i = 0; i < nflQuarterbacks.length; i++) {
        nflQuarterbacks[i].style.display = "none";
      }
      // Show only NFL quarterbacks that match the search term
      const matchedQuarterbacks = Array.from(nflQuarterbacks).filter(quarterback => {
        return quarterback.textContent.toLowerCase().includes(searchTerm);
      });
      matchedQuarterbacks.forEach(quarterback => {
        quarterback.style.display = "block";
            });
		    });

		    // Add click event listener to selected players list for player removal
		    const selectedPlayersList = document.getElementById("selected-players-list");
		    selectedPlayersList.addEventListener("click", (event) => {
		      if (event.target.tagName === "LI") {
		        event.target.remove();
		      }
		    });
		  </script>
		</body>
</html>