JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    <input type="checkbox" value="ch1" /> ch1<br/>
    <input type="checkbox" value="ch2" /> ch2<br/>
    <input type="checkbox" value="ch3" /> ch3<br/>
    <input type="checkbox" value="ch4" /> ch4<br/>
    <input type="button" value="Serialize" />
</div>
<div id="result"></div>

JavaScript

var seq = 0,
    $wrapper = $("#wrapper");
    $ch = $('input[type="checkbox"]', $wrapper).on('click', function() {
        $(this).data('seq', seq++);
    });

$("input[type=button]", $wrapper).click(function() {
    var str = Array.prototype.sort.call($ch.filter(":checked"), function(a, b) {
        return $(a).data('seq') - $(b).data('seq');
    }).map(function(i, el) {
        return el.value;
    }).get().join("\n");
    $("#result").text(str).show();
});