JSFiddle - React, Tailwind, and code Playground

HTML

<div class="table-responsive">
 	<table class="table table-bordered">
 	<tbody>
 	<tr>
 	  <td  colspan="2" valign="top">
 	    Problem List:<BR />
	 	    
 	    <select id="sbox" name="selectbox">
 	      <option value ="abc">ABC</option> <option value ="def">Def</option> <option value="ghi">GHI</option> <option value="lkm">LKM</option>
 	    </select>
		<BR>
 	    <button type="button" class="btn btn-default" onclick="DeleteProbs();">Delete Selected Problem</button>
	      </td>
	  </tr>
 	<tr>
 	  <td colspan="2" valign="top"><p>To add a problem to the list, type it in the New Problem text field and then click &quot;Add to List&quot;. To remove a problem, click it in the list, then click, &quot;Delete Selected Problem&quot;<P>
 	    <strong>New Problem</strong><P>
		<input type="text" id="ProbAreaFrom">
 	     <P>
		<button type="button" class="btn btn-default" id="ProbListBtn" onclick="ListProbs();">Add to List</button>
 	    </p>
 	    
 	    Problem being detailed:<BR>
 	     <select name="select" id="dbox">
       <option value ="abc">ABC</option> <option value ="def">Def</option> <option value="ghi">GHI</option> <option value="lkm">LKM</option>
 	     </select>
 	    
	</td>
	  </tr>
 </tbody>
</table>
</div>

CSS

#sbox {
	overflow: hidden;
	width: 200px;
}

JavaScript

function DeleteProbs() {
    var x = document.getElementById("sbox");
    var y = document.getElementById("dbox");
    var val;
    for (var i = 0; i < x.options.length; i++) {
        if (x.options[i].selected) {
            val = x.options[i].value;
            x.options[i].remove();
        }
    }
    for (var i = 0; i < y.options.length; i++) {
        if (y.options[i].value == val) {
            y.options[i].remove();
        }
    }
}