JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
<div style="padding:10px;width:200px;">
	<select id="du_select" class="ui fluid dropdown" name="du_graph_types" multiple="">
		<option value="">Select DU</option>
		<option value="all">All</option>
		<option value="copper">Copper</option>
		<option value="fiber">Fiber</option>
		<option value="common">Common</option>
	</select>
</div>

JavaScript

$('#du_select').dropdown({
		action: function(text, value) {
			// nothing built in occurs
			existing_elems = $(this).dropdown("get value")
			//console.log(value)
			if (existing_elems.includes('all')) {
				alert('No options allowed to add, while "All" is already selected')
			} else if (existing_elems.length > 0 && value == 'all') {
				alert('Before selecting "All", clear the existing DU type')
			} else {
				$(this).dropdown('set selected',value)
			}
			$(this).dropdown('hide')
		}
	});