Как показать детали выбранного класса в HTML?

Question

Я перечисляю все проекты в боковой панели. Первоначально для первого он покажет пустое окно в браузере после выбора проекта на боковой панели, он будет отображать детали проекта выбранного проекта.

вот скриншот, который мне нужен как результат:

Прямо сейчас я могу отображать детали бокового меню формы выбранного проекта, но, нажимая на следующий проект, предыдущие выбранные проекты также добавляются в текущий выбранный.

Как я могу показать детали выбранных деталей проекта из меню боковой панели?

Вот код, используемый для: Для отображения списка проекта и деталей.

$(function() {
  $('ul.nav a').on('click', function() {
    var pjname = $(this).attr('name');
    $(this).parent().parent().find('a.active').removeClass('active');
    $(this).addClass('active');
    $('#' + pjname).toggleClass('d-none');
  });
});


// Get the container element
var btnContainer = document.getElementById("projectlist");

// Get all buttons with class="btn" inside the container
var btns = btnContainer.getElementsByClassName("btn");

// Loop through the buttons and add the active class to the current/clicked button
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
    var current = document.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");
    this.className += " active";
  });
}

<div class="container-fluid">
  <div class="row">
    <nav class="col-md-2 d-none d-md-block bg-light sidebar">
      <div id="projectlist" class="sidebar-sticky">
        <ul class="nav flex-column nav-pills">

          {{range .Projects}}
          <li class="nav-item">
            <a name="{{.ProjectID}}" class="nav-link" href="#">

              <img class="img-fluid" style="width:8%" src="static/image/generic_gcp.png"> {{.Name}}

              <div>
                <small>
                    ProjectId: {{.ProjectID}}
                  </small>
              </div>
            </a>
          </li>
          {{end}}

        </ul>

        <!-- Might need this seperator
            <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
              <span>Savings Reports</span>
            </h6>
          -->
      </div>
    </nav>

    <main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
      {{range .Projects}}

      <div id={{.ProjectID}} class="d-none justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom ">
        <h1 class="h2">Project:{{.Name}}</h1>

        <!-- This pushes right
    <div class="btn-toolbar mb-2 mb-md-0">    </div>
-->

        <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
          <div class="btn-group mr-2" role="group" aria-label="First group">
            <button type="button" class="btn btn-secondary">Compute API Enabled</button>
          </div>
          <div class="btn-group mr-2" role="group" aria-label="Second group">
            <button type="button" class="btn btn-secondary">Service Account Key</button>
          </div>
          <div class="btn-group" role="group" aria-label="Third group">
            <button type="button" class="btn btn-secondary">Other Errors</button>
          </div>
        </div>
        <hr>


        <div class="container">

          <table class="table table-striped h6">
            <thead>
              <tr>
                <th scope="col">Name</th>
                <th scope="col">Type</th>
                <th scope="col">GCP Zone</th>
                <th scope="col">Startup</th>
                <th scope="col">Shutdown</th>
              </tr>
            </thead>
            <tbody>
              {{range .Instances}}
              <tr>
                <td>{{.Name}}</th>
                  <td>{{.Type | baseUrl}}</td>
                  <td>{{.Zone | baseUrl}}</td>
                  <td>


                    <div class="btn-group btn-group-sm" role="group">
                      <button id="startHour" type="button" class="btn btn-secondary" data-toggle="dropdown" href="#">hour</button>

                      <div class="dropdown-menu" aria-labelledby="startHour">
                        <a class="dropdown-item" href="#">1</a>
                        <a class="dropdown-item" href="#">2</a>
                        <a class="dropdown-item" href="#">3</a>
                        <a class="dropdown-item" href="#">4</a>
                        <a class="dropdown-item" href="#">5</a>
                        <a class="dropdown-item" href="#">6</a>
                        <a class="dropdown-item" href="#">7</a>
                        <a class="dropdown-item" href="#">8</a>
                        <a class="dropdown-item" href="#">9</a>
                        <a class="dropdown-item" href="#">10</a>
                        <a class="dropdown-item" href="#">11</a>
                        <a class="dropdown-item" href="#">12</a>
                      </div>
                      <span style="color:white; background-color:#5A6268">:</span>
                      <div class="btn-group btn-group-sm" role="group">
                        <button id="startMinute" type="button" class="btn btn-secondary" data-toggle="dropdown" href="#">min</button>
                        <div class="dropdown-menu" aria-labelledby="startMinute">
                          <a class="dropdown-item" href="#">00</a>
                          <a class="dropdown-item" href="#">05</a>
                          <a class="dropdown-item" href="#">10</a>
                          <a class="dropdown-item" href="#">15</a>
                          <a class="dropdown-item" href="#">20</a>
                          <a class="dropdown-item" href="#">25</a>
                          <a class="dropdown-item" href="#">30</a>
                          <a class="dropdown-item" href="#">35</a>
                          <a class="dropdown-item" href="#">40</a>
                          <a class="dropdown-item" href="#">45</a>
                          <a class="dropdown-item" href="#">50</a>
                          <a class="dropdown-item" href="#">55</a>
                        </div>
                      </div>
                      <div class="btn-group btn-group-sm" role="group">
                        <button type="button" class="btn btn-secondary btn-toggle-time" data-toggle="collapse" href="#">am</button>
                      </div>
                      <div class="btn-group btn-group-sm" role="group">
                        <button type="button" class="btn btn-secondary">zone</button>
                      </div>
                      <div class="btn-group btn-group-sm" role="group">
                        <button type="button" class="btn btn-primary">Set</button>
                      </div>

                    </div>
                  </td>
                  <td>
                    <div class="btn-group btn-group-sm" role="group">
                      <button type="button" class="btn btn-secondary">hour</button>
                      <button type="button" class="btn btn-secondary">min</button>
                      <button type="button" class="btn btn-secondary">am</button>
                      <button type="button" class="btn btn-secondary">zone</button>
                      <button type="button" class="btn btn-primary">Set</button>
                    </div>

                  </td>

              </tr>
              {{end}}
            </tbody>
          </table>
        </div>

        <!--
              <div class="btn-group mr-2">
                <button class="btn btn-sm btn-outline-secondary">Share</button>
                <button class="btn btn-sm btn-outline-secondary">Export</button>
              </div>

              <button class="btn btn-sm btn-outline-secondary dropdown-toggle">
                <span data-feather="calendar"></span>
                This week
              </button>
              -->






      </div>
      {{end}}
    </main>
  </div>
</div>