JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://harvesthq.github.io/chosen/chosen.css">
<script src="http://harvesthq.github.io/chosen/chosen.jquery.js"></script>
<div class='cadastro'>
     <h1>Cadastro de Filmes</h1>

    <form action='' method='post' enctype='multipart/form-data' name='form1' id='form1'>
        <p>País
            <select name='pais[]' data-placeholder=' ' multiple class='chzn-select'>
                <option value='$pais[$i]' selected>A</option>
                <option value='$pais[$i]' >B</option>
                <option value='$pais[$i]' >C</option>
                <option value='$pais[$i]' >D</option>
                <option value='$pais[$i]' >E</option>
                <option value='$pais[$i]' selected>F</option>
            </select>
        </p>
        <p>
            <input name='enviar' type='submit' id='enviar' value='Enviar' />
        </p>
        <p>
        Novo país
        <input type="text" id="novopais" />
        <input type="button" value="Cadastrar" onclick="addPais($('#novopais').val())" />
        </p>
    </form>
</div>

JavaScript

$(function () {
    $('.chzn-select').chosen({
        width: "50%",
        no_results_text: "Sem registro de ",
        size: "5"
    });
});

function addPais(i){
	$('.chzn-select').append("<option value='"+i+"'>"+i+"</option>");
  $('.chzn-select').val(i); // if you want it to be automatically selected
	$('.chzn-select').trigger("chosen:updated");
  $('#novopais').val('');
  alert("País cadastrado!");
}