JSFiddle - React, Tailwind, and code Playground

HTML

<select id="id_sex" name="sex">
    <option value="" selected="selected">---------</option>
    <option value="Male" data-pfoption="Actor" data-pfoption2="dfd">Male</option>
    <option value="Female" data-pfoption="Actress">Female</option>
</select>

<div class="form-group">
    <label for="exampleInputEmail1">Primary Profession</label>
    
    <select id="id_primary_profession" name="primary_profession">
        <option value="">---------</option>
    </select>
</div>

JavaScript

$(function(){
    var profession = $('#id_primary_profession');
    $('#id_sex').change(function(){
        var optData = $(this).find(':selected').data('pfoption');
        profession.find('option:eq(1)').remove().end().append(
            $('<option/>').val(optData).text(optData)
        );
    });
});