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 div = document.getElementById('threeselect');
var selects = $('[position_title ^= 3] select');
for (var i = 0; i < selects.length; i++) {
selects[i].prev = '';
selects[i].onchange = function() {
var text = (this.selectedIndex) ? this.options[this.selectedIndex].innerHTML : '';
if (this.prev) {
div.innerHTML = (div.innerHTML).replace(this.prev, text);
} else {
div.innerHTML += text + ' ';
}
this.prev = text;
}
}