JSFiddle - React, Tailwind, and code Playground

HTML

<select multiple>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
</select>

JavaScript

var vals = [];
$("select[multiple]").click(function(e){
		var scroll_offset= this.scrollTop;
	  var newVals = $(this).val();
    if (newVals.length === 1) {
    	var index = vals.indexOf(newVals[0])
    	if (index > -1) {
      	vals.splice(index, 1);
      } else {
      	vals.push(newVals[0])
      }
      $(this).val(vals);
      this.scrollTop = scroll_offset;
    }
});