JSFiddle - React, Tailwind, and code Playground
HTML
<form action="http://localhost/mobi2go/trunk/console-x/location/1/settings/hours" class="hours_form" method="post" accept-charset="utf-8">
<fieldset class="show-message">
<label>Accept orders up to closing</label>
<select name="accept_till_closing" class="shorter">
<option>Yes</option>
<option>No</option>
</select>
<div class="input-message">
</div>
</fieldset>
<h3>Pick Up Opening Hours</h3>
<fieldset>
<label>Sunday</label>
<div class="opening-hour">
<select name="pickup_sunday_open_hour" class="opening hour">
<option value="12" selected="selected">12</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
</select> :
<select name="pickup_sunday_open_minute" class="opening minute">
<option value="00" selected="selected">00</option>
<option value="15">15</option>
<option value="30">30</option>
<option value="45">45</option>
</select> <select name="pickup_sunday_open_meridiem" class="opening am-pm">
<option value="AM" selected="selected">AM</option>
<option value="PM">PM</option>
</select> to
<select name="pickup_sunday_close_hour" class="closing hour">
<option value="12" selected="selected">12</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
</select> :
<select...
JavaScript
$("button").click(function () {
var arr = [];
$("fieldset").each(function () {
var $this = $(this),
serialized = $this.children("input").serialize(),
type = $this.children("legend").text();
// Replace the jQuery-serialized content into valid JSON
serialized = serialized.replace(/([^=]+)=([^&]*)(&)?/g, function ($0, name, val, amp) {
return '"'+name+'":'+'"'+val+'"' + (amp ? "," : "");
});
// Add it to the array
arr.push('{"type":"'+type+'",'+serialized+'}');
});
// Join the array into a valid JSON string
var json = "[" + arr.join(",") + "]";
$(this).next().text(json);
});