how to handle seperate FormData in the replicated form?

I am trying to creating a dashboard with panels of different sizes and re-arrange able according to the users will also the panel have different formData inside the same panel Form.

Dashboard and panels

Expected : to get the formData from the first panelform and i have stored it in a hidden input element inside the first formData and likewise for n number of panel i want to achieve this, then for saving the panels i want to iterate over the each panels and get the formData that is stored in each panels.

Dashboard 1

  • panel 1 {“type”:”1″,”chartType”:”bar”,”panellogsource”:”19″,”fieldSelected”:[“dst_as”,”dst_mask”],”timeWindow”:”Last 15 Minutes”}
  • panel 2 {“type”:”2″,”aggregateType”:”count”,”panellogsource”:”19″,”fieldSelected”:[“dst_port”,”dst_tos”],”timeWindow”:”Last 15 Minutes”}

Actual : i am able to set the data for the first panel but after populating the second panel the form is retrieving the previous(first) panel data. i want to separate the panels formData for each panel.

Dashboard 1

  • panel 1 {“type”:”1″,”chartType”:”bar”,”panellogsource”:”19″,”fieldSelected”:[“dst_as”,”dst_mask”],”timeWindow”:”Last 15 Minutes”}
  • panel 2 {“type”:”1″,”chartType”:”bar”,”panellogsource”:”19″,”fieldSelected”:[“dst_as”,”dst_mask”],”timeWindow”:”Last 15 Minutes”} (same content for the second panel)
<div class="panel-container col-lg-${layoutSize}">
  <div class="card">
    <div class="panel card-body ibox">
      <div class="panel-heading card-title ibox-title">
        <h5>Drag&amp;Drop ${layoutSize}</h5>
        <div class="ibox-tools d-flex">
          <a class="collapse-link" onclick="return collapseIbox(event, this);">
            <i class="fa fa-chevron-up"></i>
          </a>
          <div class="dropdown options ms-auto">
            <a class="dropdown-toggle" data-bs-toggle="dropdown">
              <i class="fa fa-wrench"></i>
            </a>
            <ul class="dropdown-menu">
              <li>
                <a href="#" onclick="editPanel()" class="dropdown-item"
                  >Edit Content</a
                >
              </li>
              <li>
                <a href="#" class="dropdown-item">
                  Size:
                  <button
                    class="btn btn-l btn-primary"
                    onclick="changeSize(this, 'lg');"
                    title="Full Row"
                  >
                    <i class="fa fa-square-o fs-6"></i>
                  </button>
                  <button
                    class="btn btn-m btn-primary"
                    onclick="changeSize(this, 'md');"
                    title="2 Column Row"
                  >
                    <i class="fa fa-square-o fs-5"></i>
                  </button>
                  <button
                    class="btn btn-s btn-primary"
                    onclick="changeSize(this, 'sm');"
                    title="3 Column Row "
                  >
                    <i class="fa fa-square-o fs-4"></i>
                  </button>
                  <button
                    class="btn btn-xs btn-primary"
                    onclick="changeSize(this, 'xs');"
                    title="4 Column Row"
                  >
                    <i class="fa fa-square-o fs-3"></i>
                  </button>
                </a>
              </li>
            </ul>
          </div>
          <a class="close-link" onclick="return closeIbox(event, this);">
            <i class="fa fa-times"></i>
          </a>
        </div>
      </div>
      <div class="ibox-content">
        <!-- add new content to the panel -->
        <button type="button" class="btn btn-light ms-2" onclick="editPanel()">
          Edit Panel
        </button>
      </div>
    </div>
  </div>
</div>
<!-- Panel Loading Modal -->
<div class="modal fade" id="panelCreateModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-xl">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Panel Data</h5>
        <button
          id="icon-modal-close"
          type="button"
          class="btn-close"
          data-bs-dismiss="modal"
          aria-label="Close"
        >
          <i class="bx bx-x text-white font"></i>
        </button>
      </div>
      <div class="modal-body">
        <%@ include file="../dashboard/panel_create.jsp"%>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
          Close
        </button>
      </div>
    </div>
  </div>
</div>

panel_create.jsp

<div class="panel">
    <form class="row g-3" id="PanelCreationForm" onsubmit="return false;">
        <!-- TYPE-> CHART,AGGREGATION -->
        <div class="col-md-6">
            <label for="type" class="form-label">Type<span style="color: red;">*</span></label> <select name="type" id="type" class="form-control" required
                onchange="toggleType(this.value)">
                <option value="select" selected disabled>Select</option>
                <option value="1" ${panel ne null and panel.type eq '1' ? 'selected' : ''}>Chart</option>
                <option value="2" ${panel ne null and panel.type eq '2' ? 'selected' : ''}>Aggregation</option>
            </select>
        </div>
        <!-- CHART OPTION / AGGREGATE OPTION -->
        <div class="col-md-6">
            <label for="type" class="form-label">Chart / Aggregate<span style="color: red;">*</span></label><select name="chartType" id="chartType"
                class="form-control" required>
                <option value="select" selected disabled>Select Chart</option>
                <c:forEach var="option" items="${chartOptions}">
                    <option value="${option.value}" <c:if test="${option.value == panel.typeData}">selected</c:if>>${option.displayText}</option>
                </c:forEach>
            </select> <select name="aggregateType" id="aggregateType" class="form-control" required>
                <option value="select" selected disabled>Select Aggregate</option>
                <c:forEach var="option" items="${aggregateOptions}">
                    <option value="${option.value}" <c:if test="${option.value == panel.typeData}">selected</c:if>>${option.displayText}</option>
                </c:forEach>
            </select>
        </div>
        <div class="col-md-2">
            <!-- LogSource -->
            <label for="logsource" class="form-label">Log Source<span style="color: red;">*</span></label> <select name="panellogsource" id="panellogsource"
                class="form-control" required>
                <option value="select" selected disabled>Select</option>
                <c:forEach var="logSource" items="${LogSource.sources()}">
                    <option value="${logSource.logId}" <c:if test="${logSource.logId eq panel.logSource}">selected</c:if>>${logSource.name}</option>
                </c:forEach>
            </select>
        </div>
        <!-- FIELD -->
        <div class="col-md-10">
            <!-- Field Multi Select -->
            <label class="form-label">Field<span style="color: red;">*</span></label>
            <div id="fieldSelectDiv">
                <select multiple name="fieldSelected" class="form-control form-control-cust" id="fieldSelect" required>
                </select>
            </div>
        </div>
        <div class="col-md-2">
            <!-- Time Window -->
            <button type="button" style="margin-left: 4px" data-popover-content="#pop-time-window-content" data-toggle="popover" tabindex="0"
                class="btn btn-sm btn-light btn-icon-custom time-window-pop" id="wTimeWindowCalendar" title="Time Window">
                <i class="bx bx-calendar font-20"></i>
            </button>
            <input style="min-width: 300px !important; max-width: 300px !important;" type="text" name="timeWindow" id="timeWindow"
                class="form-control form-control-cust timeWindowInput" placeholder="Time Window" data-time-window="last-1-year"
                value="${panel ne null ? panel.timeWindow: ''}" readonly>
            <!-- Time Window End -->
        </div>
        <div class="col-md-12">
            <!-- Panel Data type="hidden"  -->
            <input type="text" class="form-control" id="panelData" value=" ">
        </div>
        <div class="col-12" style="padding-top: 25px; display: flex; justify-content: center;">
            <c:if test="${page eq 'new'}">
                <button type="submit" onclick="javascript:addPanelData()" class="btn btn-light px-5" id="btnSubmit">Add</button>
            </c:if>
            <c:if test="${page eq 'edit'}">
                <button type="submit" onclick="javascript:updatePanelData()" class="btn btn-light px-5" id="btnSubmit">Update</button>
            </c:if>
        </div>
    </form>
</div>

js function to add the formData to each panel


function addPanelData() {
    console.log("addPanelData");
    // Iterate over each panel container
    $('.panel').each(function(index) {
        var formDataObject = {};
        // Serialize the form data for the current panel
        var formData = $(this).find('form').serializeArray();
        console.log("formData: ", formData);
        $.each(formData, function(i, field) {
            if(field.name==='fieldSelected'){
                if(!formDataObject[field.name]){
                    formDataObject[field.name]=[];  
                }
                formDataObject[field.name].push(field.value);
            }else{
                formDataObject[field.name] = field.value;
            }
        });

        console.log(`Form Data for Panel ${index}:`, formDataObject);

        // Convert formDataObject to JSON string and store it in the hidden input field panelData
        $(this).find('input[id="panelData"]').val(JSON.stringify(formDataObject));
        $(this).find('form')[0].reset();
    });
}