Fix all tab content being changed at once

core/templates/modals/context.html

@@ -2,8 +2,6 @@
 {% load static %}
 
 <script src="{% static 'modal.js' %}"></script>
-<link rel ="stylesheet" href="{% static 'tabs.css' %}">
-<script src="{% static 'tabs.js' %}"></script>
 <script>
   document.addEventListener("restore-modal-scroll", function(event) {
     var modalContent = document.getElementsByClassName("modal-content")[0];
@@ -27,13 +25,22 @@
 
   });
 </script>
+<style>
+  #tab-content-{{ unique }} div {
+    display: none;
+  }
+
+  #tab-content-{{ unique }} div.is-active {
+      display: block;
+  }
+</style>
 
 <div id="modal" class="modal is-active is-clipped">
   <div class="modal-background"></div>
   <div class="modal-content">
     <div class="box">
       {% include 'partials/notify.html' %}
-      <div class="tabs is-toggle is-fullwidth is-info" id="tabs">
+      <div class="tabs is-toggle is-fullwidth is-info" id="tabs-{{ unique }}">
         <ul>
           <li class="is-active" data-tab="1">
             <a>
@@ -61,7 +68,7 @@
           </li>
         </ul>
       </div>
-      <div id="tab-content">
+      <div id="tab-content-{{ unique }}">
         <div class="is-active" data-content="1">
           <h4 class="subtitle is-4">Scrollback of {{ channel }} on {{ net }}{{ num }}</h4>
           {% include 'modals/context_table.html' %}
@@ -108,7 +115,7 @@
         </div>
       </div>
     </div>
+    <script>initTabs("{{ unique }}");</script>
     <button class="modal-close is-large" aria-label="close"></button>
-    {# <script>activateButtons();</script> #}
   </div>
 </div>

core/templates/modals/drilldown.html

@@ -2,8 +2,6 @@
 {% load static %}
 
 <script src="{% static 'modal.js' %}"></script>
-<link rel ="stylesheet" href="{% static 'tabs.css' %}">
-<script src="{% static 'tabs.js' %}"></script>
 <div id="modal" class="modal is-active is-clipped">
   <div class="modal-background"></div>
   <div class="modal-content">