JSFiddle - React, Tailwind, and code Playground

HTML

<div id="page">
    <select>
        <option Pierre="new">Pierre</option>
        <option Paul="new">Paul</option>
        <option Jacques="new">Jacques</option>
        <option value="new">Ajouter un nouveau nom</option>
    </select>
</div>

JavaScript

$("#page").on ("change", "select", function () {
    if ($(this).val() == 'new') {
        $("select").replaceWith("<div id='input-group'><input></input><button id='ajouter'>Ajouter</button><button id='annuler'>Annuler</button></div>");
        $("input").focus();
    }
});

$("#page").on("click", "#ajouter", function () {
    var temp = $("input").val();
    $("#input-group").replaceWith('<select>    <option>Pierre</option><option>Paul</option><option>Jacques</option><option value="new">Ajouter un nouveau nom</option></select>');
    $("[value='new']").before("<option value=" + temp + ">" + temp + "</option>");
    $("option[value=" + temp + "]").attr("selected", "selected");
});