JSFiddle - React, Tailwind, and code Playground

HTML

<select id="ProducterType" name="nmf" style="float:left;">
            <option value="Principal">Principal</option>
            <option value="Producer">Producer</option>
            <option value="Sole Proprietor">Sole Proprietor</option>                
        </select>


        <select id="Role" name="nmf" style="float:left;">
            <option value="Agent">Agent</option>
            <option value="Financial Advisor">Financial Advisor</option>
            <option value="Platform">Platform</option>
            <option value="Principla_Owner">Principal/Owner</option>
            <option value="Registered Rep">Registered Rep</option>
            <option value="Sole Proprietor">Sole Proprietor</option>              
        </select>

JavaScript

$(function(){
    $("#ProducterType").change(function(){
       var value=$(this).val();
       if(value=="Sole Proprietor") $("#Role").val(value);
    });
    $("#Role").change(function(){
       var value=$(this).val();
       if(value=="Sole Proprietor") $("#ProducterType").val(value);
    });
});