JSFiddle - React, Tailwind, and code Playground
HTML
<select name="seqselect" id ="seqselect" />
<option selected> Choose an option </option>
<optgroup id ="Ejemplos" style="color: #E9122F;" label="Ejemplos">
<option value="Ejemplo1">Ejemplo1</option>
</optgroup>
<optgroup id ="Pruebas" style="color: #0B33E6;" Label="Pruebas">
<option value="Pruebas1">Pruebas1</option>
</optgroup>
</select>
<div style="width:97%; height:auto; min-height:50px; display:block; background:#DEDEDE; border-radius:5px" id="sequence" name="seq" rows="2" ></div>
JavaScript
$("#seqselect").change(function(){
var selected = $("option:selected", this);
var colour = document.getElementById(selected.parent()[0].id).style.color;
if (document.getElementById('sequence').innerHTML == ""){
document.getElementById('sequence').innerHTML = "<span style='color:"+colour+"'>"+this.value+"</span>";
}
else
{
document.getElementById('sequence').innerHTML = document.getElementById('sequence').innerHTML+" "+"<span style='color:"+colour+"'>"+this.value+"</span>";
}
});