JSFiddle - React, Tailwind, and code Playground

by _sir

HTML

<div class="form">
  <h1>
  Form
  </h1>
  <div id="alerts">
  </div>
  <button id="formVerify">
  Verify
  </button>
  <button id="formSubmit">
   Submit
  </button>
</div>

<div id="modal1">
 <h1>
 Modal 1
 </h1>
 <button class="modalApprove">Approve</button>
 <button class="modalCancel">Cancel</button>
</div>

<div id="modal2">
 <h1>
 Modal 2
 </h1>
 <button class="modalApprove">Approve</button>
 <button class="modalCancel">Cancel</button>
</div>

<div>
<h1>
Data
</h1>
<div id="data"></div>
</div>

CSS

#data {
 margin: 1em;
 padding: 1em;
 border: 1px solid black;
 width: 20em;
 min-height: 5em;
 background: #eee;
 box-shadow: 0px 3px 10px 2px #00000022 inset;
 font-family: Consolas, Courier, Monaco, monospace;
 white-space: pre;
}

JavaScript

let formData = {};

const showData = () => {
 document.getElementById('data').innerText = JSON.stringify(formData, null, 2);
}


document.getElementById('formVerify').addEventListener('click', () => {
	formData._saveWithWarning = true;
	showData();
});