How do I create an accordion from json data that is from an html form?

[RealImmortal2004]

I would like to use the html form below:

<form action="submit-curriculum-data.php" method="POST">
<label for="category">Category:</label>
  <select style="width:21%" id="mySelect11">
  <option value="option1" disabled selected></option>
  <option value="absorptiontechniques"><code>--Show All--</code></option>
  <option value="absorptiontechniques">Absorption Techniques</option>
  <option value="balancebeam">Balance Beam</option>
  <option value="breaking">Breaking</option>
  <option value="blocks">Blocks</option>
  <option value="breathingtechniques">Breathing Techniques</option>
  <option value="breakreleases">Break Releases</option>
  <option value="calisthenics">Calisthenics</option>
  <option value="chokes">Chokes</option>
  <option value="cargonet">Cargo Net</option>
  <option value="characterdevelopment">Character Development</option>
  <option value="drills">Drills</option>
  <option value="falls">Falls</option>
  <option value="floor">Floor</option>
  <option value="forms">Forms</option>
  <option value="grabs">Grabs</option>
  <option value="grappling">Grappling</option>
  <option value="immobilizationtechniques">Immobilization Techniques</option>
  <option value="jointbreaks">Joint Breaks</option>
  <option value="kicks">Kicks</option>
  <option value="lock">Lock</option>
  <option value="movement">Movement</option>
  <option value="philosophy">Philosophy</option>
  <option value="precisionjumping">Precision Jumping</option>
  <option value="pressurepoints">Pressure Points</option>
  <option value="pegboard">Peg Board</option>
  <option value="rings">Rings</option>
  <option value="rolls">Rolls</option>
  <option value="ropes">Ropes</option>
  <option value="rockwall">Rock Wall</option>
  <option value="supplements">Supplements</option>
  <option value="selfdefense">Self-Defense</option>
  <option value="stepping">Stepping</option>
  <option value="stances">Stances</option>
  <option value="striding">Striding</option>
  <option value="strikes">Strikes</option>
  <option value="sparring">Sparring</option>
  <option value="swordbasics">Sword Basics</option>
  <option value="sworddueling">Sword Dueling</option>
  <option value="swordforms">Sword Forms</option>
  <option value="swordtwirling">Sword Twirling</option>
  <option value="trampoline">Trampoline</option>
  <option value="tumbletrack">Tumble Track</option>
  <option value="throws">Throws</option>
  <option value="trainingprinciples">Training Principles</option>
  <option value="vaults">Vaults</option>
  <option value="vitalareas">Vital Areas</option>
  <option value="wall">Wall</option>
</select>
<br><br>
<label for="technique">Technique:</label>
       <select name="technique" id="mySelect22" required>
<option selected disabled>Select technique</option>
    <option>Front Snap Kick</option>
    <option>Round Kick</option>
    <option>Side Thrust Kick</option>
    <option>Side Kick</option>
    <option>Knee Strike</option>
    <option>Elbow</option>
    <option>Hammerfist</option>
  </select>
  <br><br>
          <label for="description" style="display:none">Description:</label><br>
  <textarea name="description" id="description" rows="15" style="width:15%; display:none" required>
  </textarea>
  <br><br>
  <button type="submit" title="Submit">Add</button>
</form>

And I would like to send the data to a json file and then create a new accordion for every new submission and have each accordion layed out as the following:

Accordion Header (the thing that opens the accordion) - This has the category field.
Accordion Panel Header - This has the technique name
Accordion Panel Content - This has the description

I would like to have the accordion button (the thing you see on page load; in other words when it isn't open)) look like the attached image.
And the techniques will also be accordions so that the content opens when the technique is clicked on.

 

[Johna]

@vipulgupta When posting code, please use the code block. You can use the </> icon, or use markdown.