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);
$wrapper.on('click', 'input[type="checkbox"]', function() {
    if (this.checked) {
        $ch = $ch.not(this);//remove from jQuery array
        Array.prototype.push.call($ch, this);//add to front of jQuery array
    }
});

$("input[type=button]", $wrapper).on('click', function() {
    var str = $ch.filter(":checked").map(function(i, el) {
        return el.value;
    }).get().join("\n");
    $("#result").text(str).show();
});