JSFiddle - React, Tailwind, and code Playground

by Maulik Anand

HTML

<textarea name="message">
    <input type="text" value="TextTwo" id="texttwo" />
    <input type="text" value="DataOne" id="dataone" />
    <input type="text" value="NumberTwo" id="numbertwo" />
    <input type="text" value="TextOne" id="textone" />
    <input type="text" value="DataTwo" id="datatwo" />
    <input type="text" value="NumberOne" id="numberone" />
</textarea>
<button>process</button>

CSS

textarea {
    width:300px;
    min-height:150px;
}
.data {
    text-align:center;
}
.text {
    text-align:left;
}
.number {
    text-align:right;
}

JavaScript

$('button').click(function () {
    var code = $.parseHTML($('textarea[name=message]').val());
    console.log(code);
    var newCode = "";

    code = $.grep(code, function (n, i) {
        if (n.nodeValue) {
            return n.nodeValue.trim()
        } else {
            return (n.outerHTML && n.outerHTML.trim())
        }
    });

    for (var i = 0; i < code.length; i++) {
        var element=$(code[i]);
        element.addClass(element.attr("type"));
        newCode += code[i].outerHTML;
    }
    console.log(newCode);
    console.log(code);


    if (!$('#output').length) {
        $("body").append('<h2>Output</h2><textarea id="output" rows="10" cols="100"></textarea>');
    }




    $('#output').val(newCode);
});