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

$(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>