Try to make these weird templates safer

I think we need to check these snippets rather carefully
somepoint not too far

Signed-off-by: Pratyush Desai <pratyush.desai@liberta.casa>

webpanel/templates/webpanel/port_mapping_widget.html

@@ -1,100 +1,44 @@
-<!-- <div id="{{ widget.name }}_container">
-    {% if widget.value %}
-      {% for k, v in widget.value.items %}
-        <div class="port-entry">
-          <input type="text" name="{{ widget.name }}_key" value="{{ k }}" placeholder="port/proto">
-          <input type="number" name="{{ widget.name }}_value" value="{{ v }}" placeholder="host port">
-          <button type="button" onclick="this.parentElement.remove()">×</button>
-        </div>
-      {% endfor %}
-    {% else %}
-      <div class="port-entry">
-        <input type="text" name="{{ widget.name }}_key" placeholder="port/proto">
-        <input type="number" name="{{ widget.name }}_value" placeholder="host port">
-        <button type="button" onclick="this.parentElement.remove()">×</button>
-      </div>
-    {% endif %}
-    
-    <div id="{{ widget.name }}_add"></div>
-    <button type="button" onclick="addPortField_{{ widget.name|slugify }}()">+ Add</button>
-  </div>
-  
-  <script>
-    function addPortField_{{ widget.name|slugify }}() {
-      const container = document.getElementById("{{ widget.name }}_add");
-      const div = document.createElement("div");
-      div.classList.add("port-entry");
-      div.innerHTML = `
-        <input type="text" name="{{ widget.name }}_key" placeholder="port/proto">
-        <input type="number" name="{{ widget.name }}_value" placeholder="host port">
-        <button type="button" onclick="this.parentElement.remove()">×</button>
-      `;
-      container.appendChild(div);
-    }
-  </script>
-  
-  <style>
-    .port-entry {
-      margin-bottom: 5px;
-    }
-    .port-entry input {
-      margin-right: 5px;
-    }
-  </style>
-   -->
-
 <div id="{{ widget.name }}_container">
-    {% if widget.value %}
     {% for k, v in widget.value.items %}
     <div class="port-entry">
-        <input type="text" name="{{ widget.name }}_key" value="{{ k }}" placeholder="port/proto">
+      <input type="text" name="{{ widget.name }}_key[]" value="{{ k }}" placeholder="port/proto">
-        <input type="number" name="{{ widget.name }}_value" value="{{ v }}" placeholder="host port">
+      <input type="number" name="{{ widget.name }}_value[]" value="{{ v }}" placeholder="host port">
+      <button type="button" class="remove-port-entry">×</button>
+    </div>
+    {% empty %}
+    <div class="port-entry">
+      <input type="text" name="{{ widget.name }}_key[]" placeholder="port/proto">
+      <input type="number" name="{{ widget.name }}_value[]" placeholder="host port">
       <button type="button" class="remove-port-entry">×</button>
     </div>
     {% endfor %}
-    {% else %}
-    <div class="port-entry">
-        <input type="text" name="{{ widget.name }}_key" placeholder="port/proto">
-        <input type="number" name="{{ widget.name }}_value" placeholder="host port">
-        <button type="button" class="remove-port-entry">×</button>
   </div>
-    {% endif %}
-
-    <div id="{{ widget.name }}_add"></div>
   <button type="button" id="add-port-{{ widget.name|slugify }}">+ Add</button>
-</div>
-
   <script>
     document.addEventListener("DOMContentLoaded", function () {
+      const container = document.getElementById("{{ widget.name }}_container");
       const addButton = document.getElementById("add-port-{{ widget.name|slugify }}");
-        const container = document.getElementById("{{ widget.name }}_add");
+      addButton.addEventListener("click", () => {
-
-        // Event listener for the add button
-        addButton.addEventListener("click", function () {
         const div = document.createElement("div");
-            div.classList.add("port-entry");
+        div.className = "port-entry";
         div.innerHTML = `
-        <input type="text" name="{{ widget.name }}_key" placeholder="port/proto">
+          <input type="text" name="{{ widget.name }}_key[]" placeholder="port/proto">
-        <input type="number" name="{{ widget.name }}_value" placeholder="host port">
+          <input type="number" name="{{ widget.name }}_value[]" placeholder="host port">
           <button type="button" class="remove-port-entry">×</button>
         `;
         container.appendChild(div);
       });
-
+      container.addEventListener("click", (e) => {
-        // Delegate event listener for the remove button
+        if (e.target.classList.contains("remove-port-entry")) {
-        container.addEventListener("click", function (e) {
-            if (e.target && e.target.classList.contains("remove-port-entry")) {
           e.target.parentElement.remove();
         }
       });
     });
   </script>
-
   <style>
     .port-entry {
       margin-bottom: 5px;
     }
-
     .port-entry input {
       margin-right: 5px;
     }