Asking ChatGPT for help

ui/general/health.html

@@ -7,6 +7,9 @@
     <link href="../base1/bootstrap.min.css" type="text/css" rel="stylesheet">
     <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" ></script>
     <script src="../base1/cockpit.js"></script>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet">
+    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.min.js"></script>
     <script src="../base1/jquery-3.7.1.min.js"></script>
 </head>
 
@@ -85,8 +88,18 @@
         <option value="Drone3">Drone4</option>
         <option value="Drone5">Drone5</option>
     </select>
+    
      <div id="myTableContainer"></div>    
-
+     <div class="dropdown">
+        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
+            Choose a Drone
+        </button>
+        <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
+            <li><a class="dropdown-item" href="#">Drone1</a></li>
+            <li><a class="dropdown-item" href="#">Drone2</a></li>
+            <li><a class="dropdown-item" href="#">Drone3</a></li>
+        </ul>
+    </div>
 
     <table class="table table-dark">
         <thead>

ui/general/health.js

@@ -12,6 +12,9 @@ document.onload = initPage();
 
 document.getElementById("save").addEventListener("click", saveSettings);
 
+const dropdownElement = document.getElementById('dropdownMenuButton1');
+new bootstrap.Dropdown(dropdownElement);
+
 // Function to initialize the page
 function initPage() {
     // TODO: Replace /home/spiri/services with some root level path
@@ -78,7 +81,8 @@ function saveSettings() {
 
 // Restart drone service
 function displayDroneTable() {
-    upaate table
+    // upaate table
+    ;
 }
 
 function addDropDown(box, pairs, defaultValue) {