JSFiddle - React, Tailwind, and code Playground

HTML

<select multiple="multiple" size="5">
<option value="1" selected="selected">Item A</option>
<option value="1">Item B</option>
<option value="1" selected="selected">Item C</option>
<option value="1">Item D</option>
</select>
<br />
<select multiple="multiple" size="5">
<option value="1">Item A</option>
<option value="1">Item B</option>
<option value="1">Item C</option>
<option value="1">Item D</option>
</select>
<br />
<select multiple="multiple" size="5">
<option value="1">Item A</option>
<option value="1">Item B</option>
<option value="1">Item C</option>
<option value="1">Item D</option>
</select>

JavaScript

$(function() {
    var selectedIndices = [];
    $.each($('select[multiple]:first option'), function(index, value) {
        if (this.selected) { // 'this' is the current DOM element, same as 'value'
            selectedIndices.push(index);
        }
    });
  
    var numSelected = selectedIndices.length;
    $.each($('select[multiple]:not(:first)'), function() {
        for (var i = 0; i < numSelected; i++) {
            this.options[selectedIndices[i]].selected = true;
        }
    });
  });


// Or combine both loops into one in a smarter solution:
/*
$(function() {
    var selectedIndices = [];
    $.each($('select[multiple]'), function(sIndex, sValue) {
        if (sIndex == 0) {
            $.each(this.options, function (oIndex, oValue) {
                if (this.selected)
                    selectedIndices.push(oIndex);
            });
        } else {
            for (var i = 0; i < selectedIndices.length; i++) {
                this.options[selectedIndices[i]].selected = true;
            }    
        } 
    });
});
*/