JSFiddle - React, Tailwind, and code Playground
HTML
<div>
<div>
<select id="countrylist" style="width: 150px;">
<option value="1">India</option>
<option value="2">Australia</option>
<option value="3">London</option>
<option value="4">Switzerland</option>
<option value="5">Argentina</option>
<option value="6">Bhutan</option>
<option value="7">Canada</option>
</select>
<input type="button" id="btnDelete" value="Delete" />
</div>
<div id='additem'>
<input type='text' name='addcountry' id="readme"/>
<button class="addoption">Add Country</button>
</div>
</div>
JavaScript
$(function () {
$("#btnDelete").bind("click", function () {
// on click of delete button the selected option will be removed
$("#countrylist option:selected").remove();
});
});
// on click of add button
$('.addoption').click(function(){
// the value of input will be stored in a variable
var item = $('input[name=addcountry]').val();
// the value of input will be appended in select option
$('#countrylist').append('<option>'+ item +' </option>');
});