JSFiddle - React, Tailwind, and code Playground

HTML

<div class="pane">
    <div class="ele">
        <input type="checkbox" value="X" name="Brand">
        <label>Brand 1</label>
        <input type="checkbox" value="Y" name="Brand">
        <label>Brand 2</label>
        <input type="checkbox" value="Z" name="Brand">
        <label>Brand 3</label>
        <input type="checkbox" value="1" name="Size">
        <label>Size 1</label>
        <input type="checkbox" value="2" name="Size">
        <label>Size 2</label>
        <input type="checkbox" value="3" name="Size">
        <label>Size 3</label>
    </div>
</div>

JavaScript

$(document).ready(function()
                  {
$('input[type="checkbox"]').on('change', function(e) {
		var data = {};
		var dataStrings = [];
		
		$('input[type="checkbox"]').each(function() {
			if (this.checked) {
				if (data[this.name] === undefined) data[this.name] = [];
				data[this.name].push(this.value);
			}
		});
		
		$.each(data, function(key, value)
		{
		    dataStrings.push(key + "=" + value.join(','));
		});
		
		var result = dataStrings.join('&');

		alert(result);
		
		<!-- $.post('/ajax-post-url/', data); -->
		if (history.pushState) {
			history.pushState(null, null, loc.pathname + '?' + data);
		}
	});
                  });