JSFiddle - React, Tailwind, and code Playground

by AndyE

HTML

<div class="grid_18" id="reference_container">
    <div class="grid_16">
        <fieldset>
            <legend>Website</legend>

            <span class="grid_2">Person</span>
            <input name="person" class = "grid_6" type="text" />

            <span class="push_2">Year</span>
            <input class="push_2" name="year" type="text" />
        </fieldset>
    </div>

    <div class="grid_16">
        <fieldset>
            <legend>Newspaper</legend>

            <span class="grid_2">Author</span>
            <input name="author" type="text" />

            <span class="push_4">Year</span>
            <input class="push_4" name="year" type="text" />

        </fieldset>
    </div>
</div>

CSS

a { color: blue; padding: 3px 10px; border: 1px solid blue;  }
div { border: 1px solid black; width: 300px; height:200px; display:none; margin-top:10px; }

JavaScript

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(",") + "]";

$(document.body).text(json);