JSFiddle - React, Tailwind, and code Playground

HTML

<p>Total players:</p>
<select id='players'>
    <option value='0'>choose</option>
    <option value='player1'>player1</option>
    <option value='player2'>player2</option>
    <option value='player3'>player3</option>
    <option value='player4'>player4</option>
    <option value='player5'>player5</option>
    <option value='player6'>player6</option>
    <option value='player7'>player7</option>
    <option value='player8'>player8</option>
    <option value='player9'>player9</option>
    <option value='player10'>player10</option>
    <option value='player11'>player11</option>
    <option value='player12'>player12</option>
    <option value='player13'>player13</option>
    <option value='player14'>player14</option>
    <option value='player15'>player15</option>
    <option value='player16'>player16</option>
    <option value='player17'>player17</option>
    <option value='player18'>player18</option>
</select>
<p>Playing 11:</p>
<select id='pl_11'></select>
<p>Sub players:</p>
<select id='sub'></select>

JavaScript

$('#players').change(function () {
    $('#pl_11').prepend($('option:selected', this).clone());
    $('option:selected', this).remove();
    if ($('option', this).length <= 8) {
        $('option:first', this).remove();
        $('#sub').prepend($(this).html());
        $('option', this).remove();
    }
});