JSFiddle - React, Tailwind, and code Playground

HTML

<form name="edit-collection" id="edit-collection" method="post" action="/something">
    <div>
        <input name="name" type="text" value="MyTest" required="">
    </div>
    <div>
        <select id="member-searchresults" multiple="multiple" size="6">
            <option value="four">option 4</option>
        </select>
    </div>
    <div>
        <select name="members[]" id="member-selected" multiple="multiple" size="6">
            <option value="one">option 1</option>
            <option value="two">option 2</option>
            <option value="three">option 3</option>
        </select>
    </div>
    <button type="submit">Save</button>
</form>

JavaScript

var base = base || {};

base.collectionManager = {

	init: function() {
		// Ensure current values can be selected and deselected
		$('#member-selected').on("change", function() { base.collectionManager.removeMember(this); });
		$('#member-searchresults').on("change", function() { base.collectionManager.selectMember(this); });
		// Attach function to submit
		$("#edit-collection").on("submit", function() {
			// Select all members in the selection boxes
			console.log("Selected users: "+$('#member-selected option[selected]').length);
			console.log("Selecting users: "+$('#member-selected option').length);
			$('#member-selected option').attr('selected','selected');
			console.log("Selected users: "+$('#member-selected option[selected]').length);
			// Serialize form content
			var content = $('form#edit-collection').serialize();
			console.log("Posting form data: "+content);
        // For this test, do not submit
        return false;
		});
	},

	selectMember: function(selectEL) {
		var selectedId = $(selectEL).val();
		console.log("selected userid: "+selectedId);
		var optionEl = $('#member-searchresults option[value="'+selectedId+'"').clone();
		$('#member-selected').append(optionEl);
		$('#member-searchresults option[value="'+selectedId+'"').remove();
	},

	removeMember: function(selectEL) {
		var selectedId = $(selectEL).val();
		console.log("deselected userid: "+selectedId);
		var optionEl = $('#member-selected option[value="'+selectedId+'"').clone();
		$('#member-searchresults').append(optionEl);
		$('#member-selected option[value="'+selectedId+'"').remove();
	},

};

base.collectionManager.init();