JSFiddle - React, Tailwind, and code Playground
HTML
<select multiple="true" id="jogadores_disponiveis">
<option value="jobson">Jobson</option>
<option value="carlos_alberto">Carlos Alberto</option>
<option value="zeballos">Zeballos</option>
<option value="jefferson">Jefferson</option>
</select>
<button id="toRight">>></button>
<button id="toLeft"><<</button>
<select multiple="true" id="jogadores_escalados">
<option value="tanque">El Tanque</option>
<option value="junior_cesar">Junior Cesar</option>
<option value="wallyson">Wallyson</option>
</select>
JavaScript
var disponiveis = document.getElementById("jogadores_disponiveis");
var escalados = document.getElementById("jogadores_escalados");
escalados.onchange = function () {
limpaSelecionados(disponiveis);
};
disponiveis.onchange = function () {
limpaSelecionados(escalados);
};
function limpaSelecionados(lista) {
//define a opçao selecionada como -1. como o indice das opçoes do select começa em 0, nao seleciona nenhuma opçao
lista.options.selectedIndex = -1;
//CASO A ACIMA NAO FUNCIONE EM ALGUM BROWSER, TENTE A OPÇAO ABAIXO
//for (var i = 0; i < lista.options.length; i++) {
// lista.options[i].selected = false;
//}
}