JSFiddle - React, Tailwind, and code Playground

HTML

<label for="form-control">Form Control</label>
<select class="form-control" name="competence" id="competence">
    <option>Option 1</option>
</select>
<br>
<br>

<button id="remove">Remove</button>
<br>
<br>

<label for="newFieldName">New Select</label>
<input id="newFieldName" type="text" />

<label for="newFieldValue">Value</label>
<input id="newFieldValue" type="text" />

<button id="add">Add</button>

JavaScript

// find the "Add New" button
$('#add').click(function(event){
    event.preventDefault();
    //could be static values
    var optionName = $('#newFieldName').val();
    var optionValue = $('#newColorValue').val();
    $('<option/>').attr('value',optionValue).text(optionName).appendTo('#competence');
});


// find the "Remove Selected" button
$('#remove').click(function(event){
    event.preventDefault();
    var $select = $('#competence');
    $('option:selected',$select).remove();
});