JSFiddle - React, Tailwind, and code Playground

HTML

<div style="width:600px;border:1px solid black;float:left">

     <select width="200px" id="selectedElement" onchange="copyText(selectedElement)">
             <option style="color:red"  >Theta Saving Plan</option>
             <option style="color:green"  >Roth Plan</option>
             <option style="color:yellow" >IRG Plan</option>
             <option style="color:PINK" >II Plan</option>
      </select>
    </div>

    <div style="width:300px;border:1px solid black;float:left">


             <span style="padding-top:30px;font-size:24px;font-family:arial:" class="incomeTypeSalary">Contribution</span>
             <table style="padding-top:24px">
               <tr>
                   <td >
                  <span class="incomeTypeSalary"> Annual Salary  </span>
                  </td>
                  <td>
                  <input type="text" style="width:81px; direction:rtl;">
                  </td>
               </tr>

                <tr>
                 <td >
                  <span class="incomeTypeSalary2">Annual Coomission</span >
                  </td>
                  <td>
                  <input type="text" style="width:81px; direction:rtl;">
                  </td>
               </tr>


                <tr>
                 <td >
                  <span class="incomeTypeSalary3">Annual Bonus</span >
                  </td>
                  <td>
                  <input type="text" style="width:81px; direction:rtl;">
                  </td>
               </tr>
             </table>
    </div>

JavaScript

function copyText(selectedElement) {
    var className = document.getElementsByClassName("incomeTypeSalary");
    for (i = 0; i < className.length; i++)

    {
        className[i].style.color = selectedElement.options[selectedElement.selectedIndex].style.color;
    }

}