JSFiddle - React, Tailwind, and code Playground

HTML

<div id="threeselect"></div>
<div position_title="3" id="option-274" class="option">
																	<label style="width:150px;">INSERT CARD1:</label>
								 
									<div class="fields">
										<select name="option[274]">
											<option value=""> --- Please Select --- </option>
																						<option value="350">LARGE																						(+$1.25)
																						</option>
																						<option value="349">SMALL																						(+$1.00)
																						</option>
																					</select>	
									</div>
								</div><div position_title="3,1" id="option-275" class="option">
																	<label style="width:150px;">INSERT CARD2:</label>
								 
									<div class="fields">
										<select name="option[275]">
											<option value=""> --- Please Select --- </option>
																						<option value="352">LARGE																						(+$1.25)
																						</option>
																						<option value="351">SMALL																						(+$1.00)
																						</option>
																					</select>	
									</div>
								</div><div position_title="3,2" id="option-276" class="option">
																	<label style="width:150px;">INSERT CARD3:</label>
								 
									<div class="fields">
										<select name="option[276]">
											<option value=""> --- Please Select --- </option>
																						<option value="354">LARGE																						(+$1.25)
																						</option>
																						<option value="353">SMALL																						(+$1.00)
																						</option>
																					</select>	
									</div>
								</div><div position_title="3,3" id="option-277" class="option">
																	<label style="width:150px;">ENVELOPE LINER:</label>
								 
									<div class="fields">
										<select name="option[277]">
											<option value=""> --- Please Select --- </option>
																						<option...

JavaScript

var prev3 = '';
$(function (){
	$('[position_title ^= 3] select').change(function (){
        var string1 = document.getElementById('threeselect').innerHTML;
        if (prev3 === '') {
            prev3 = $(this).find(':selected').text();
            $("#threeselect").append($(this).find(':selected').text());
        } else {
    if(string1.indexOf(prev3) + 1) {
        if (!$(this).first()) {
var newString = string1.replace(prev3, $(this).find(':selected').text()); 
alert(newString);
             $("#threeselect").html(newString);
            prev3 = $(this).find(':selected').text();
        } else {
         var newString = string1.replace(prev3, '');
             $("#threeselect").html(newString);
            prev3 = '';  
        }
    }} 
	});
});