JSFiddle - React, Tailwind, and code Playground

HTML

<div data-role="page" id="one">
    <div data-role="content">
        <label for="sel">Select the Options</label>
        <select name="sel" id="sel" data-native-menu="false" multiple="multiple">
            <option value="1">Prod 1</option>
            <option value="2">Prod 2</option>
            <option value="3">Prod 3</option>
            <option value="4">Prod 4</option>
            <option value="5">Prod 5</option>
            <option value="6">Prod 6</option>
        </select>
		<div class="floatleft" data-role="controlgroup" data-type="horizontal">
			<a href="#" id="selectall" data-role="button" data-icon="plus">Select All</a>
			<a href="#" id="deselectall" data-role="button" data-icon="minus">Deselect All</a>
		</div>
    </div>
</div>

JavaScript

function selectAll(select) {
	if (select == false) {
		$("#sel").val([]);
	} else {
		$("#sel option").prop("selected",  true);
	}
		
	$("#sel").selectmenu("refresh", true);
}

$(document).ready(function () {	
	$('#selectall').click(function (event) {
		return selectAll(true);
	});
	
	$('#deselectall').click(function (event) {
		return selectAll(false);
	});
});