JSFiddle - React, Tailwind, and code Playground

by brigand

HTML

<form id="myform" onsubmit="event.preventDefault(); ">
  <fieldset data-objecttype="array" id="county_tax">
    <legend>County Taxes</legend>
    <div class="nonrepeating_section">
      <p>
        <label for="county_tax_notes">Notes:</label>
      </p>
      <p>
        <textarea id="county_tax_notes" name="county_tax_notes" rows="3" cols="33"></textarea>
      </p>
      <p></p>
    </div>
    <div id="county_tax_div">

      <div class="repeatable_section">
        <p>
          <label for="county_tax_year">Tax Year: </label>
          <input type="text" id="county_tax_year-0" name="county_tax_year">
        </p>
        <p> County Taxes Paid:
          <input type="radio" id="county_tax_paid_yes-0" name="county_tax_paid_yes_no-0" value="yes">
          <label for="confirm_search_yes">Yes </label>
          <input type="radio" id="county_tax_paid_no-0" name="county_tax_paid_yes_no-0" value="no">
          <label for="county_tax_paid_no">No </label>
        </p>
        <p>
          <span>
            <label for="county_tax_amount">County Tax Amount </label>
            <input type="text" id="county_tax_amount-0" name="county_tax_amount">
          </span>
          <span>
            <label for="county_tax_date_paid">County Tax Paid Date: </label>
            <input type="date" id="county_tax_date_paid-0" name="county_tax_date_paid">
          </span>
        </p>
        <p>
          <span>
            <label for="county_base_amount">County Base Amount </label>
            <input type="text" id="county_base_amount-0" name="county_base_amount">
          </span>
          <span>
            <label for="county_good_thru_date">Good Thru Date : </label>
            <input type="date" id="county_good_thru_date-0" name="county_good_thru_date">
          </span>
        </p>
        <p>
          <label for="file">County Tax File Upload:</label>
          <input type="file" id="county_tax_file-0" name="county_tax_file" accept="application/pdf">
          <span...

CSS

.repeatable_section {
          border-style: dotted;
          border-width: thin;
          padding: 10px;
          margin: 10px 0px 10px 0px;
        }

JavaScript

function add_section(fieldset_id) {
  let fieldset = document.getElementById(fieldset_id)
  let template = document.getElementById(fieldset_id + "_template")
  let mydiv = document.getElementById(fieldset_id + "_div")
  let existing_sections = fieldset.getElementsByClassName("repeatable_section")
  let string_to_append_id = existing_sections.length
  let clone = template.content.cloneNode(true)
  let all_inputs = clone.children[0].getElementsByTagName("input")
  for (let i = 0; i < all_inputs.length; i++) {
    const element = all_inputs[i];
    element.id += "-" + string_to_append_id
    if (element.type == "radio") {
      element.name += "-" + string_to_append_id
    }
  }
  mydiv.appendChild(clone)
}

function simpletest() {

  let myoutput = document.getElementById('myoutput')
  let myform = document.getElementById('myform')
  //console.log("hello")
  let data = new FormData(myform)
  //let data = e.formData;
  let results = new Map();
	for (let [k, v] of data.entries()) {
    if (map.has(k)) {
	    results.get(k).push(v);
    } else {
      results.set(k, [v]);
    }
  }
  
  console.log([...results]);

  // console.log(data)
}