fix close and dismiss button to work the same

Signed-off-by: ianmuchyri <ianmuchiri8@gmail.com>

ui/web/static/js/charts.js

@@ -922,7 +922,7 @@ class TimeSeriesLineChart extends Echart {
               }
             }
             xAxisArray.push(xAxis);
-            // Remove the previous element in the array;
+            // Remove the previous element in the array
             xAxisArray.shift();
             yAxisArray.push(yAxis);
           } else {

ui/web/templates/charts/linechartmodal.html

@@ -17,7 +17,7 @@
           <h5 class="modal-title" id="lineChartModalLabel">Time Series Line Chart</h5>
           <button
             type="button"
-            class="btn-close"
+            class="btn-close close-lineChart-button"
             data-bs-dismiss="modal"
             aria-label="Close"
           ></button>
@@ -235,8 +235,7 @@ <h5>Data Source</h5>
         <div class="modal-footer">
           <button
             type="button"
-            class="btn btn-secondary"
-            id="close-lineChart-button"
+            class="btn btn-secondary close-lineChart-button"
             data-bs-dismiss="modal"
           >
             Close
@@ -250,8 +249,8 @@ <h5>Data Source</h5>
   </div>
 <script>
   // line chart form
+  const form = document.getElementById("create-lineChart-form");
   document.getElementById("create-lineChart-button").addEventListener("click", function () {
-    const form = document.getElementById("create-lineChart-form");
     if (!form.checkValidity()) {
       form.classList.add("was-validated");
       return;
@@ -332,12 +331,13 @@ <h5>Data Source</h5>
 
   });
 
-  document.getElementById("close-lineChart-button").addEventListener("click", function () {
-    const form = document.getElementById("create-lineChart-form");
-    form.querySelector(".invalid-time").innerHTML = "";
-    form.querySelector("#stop-time").classList.remove("is-invalid");
-    form.reset();
-    form.classList.remove("was-validated");
+  document.querySelectorAll(".close-lineChart-button").forEach((element) => {
+    element.addEventListener("click", function () {
+      form.querySelector(".invalid-time").innerHTML = "";
+      form.querySelector("#stop-time").classList.remove("is-invalid");
+      form.reset();
+      form.classList.remove("was-validated");
+    })
   });
 
   function addRow() {