JSFiddle - React, Tailwind, and code Playground

HTML

<select multiple="true" id="testbox" size="8">
    <option value='1'>First Option</option>
    <option value='2'>Second Option</option>
    <option value='3'>Third Option</option>
    <option value='4'>Fourth Option</option>
    <option value='5'>Fifth Option</option>
    <option value='6'>Sixth Option</option>
    <option value='7'>Seventh Option</option>
    <option value='8'>Eighth Option</option>
    <option value='9'>Ninth Option</option>
    <option value='10'>Tenth Option</option>
</select>

<p id="demo"></p>

JavaScript

var lastOpt;
$('#testbox').click(function () {
    var lastOpt = $(this).index();
});
$('#testbox').change(function () {
    if ($('option:selected', this).length > 3) {
        $(' option:eq(' + lastOpt + ')', this).removeAttr('selected');
    }
});

document.getElementById("demo").innerHTML = lastOpt;