JSFiddle - React, Tailwind, and code Playground

HTML

<fieldset>
    <select id="combo1" class="combo" data-index="1">
        <option></option>
        <option val="Opt1">Opt1</option>
        <option val="Opt2">Opt2</option>
        <option val="Opt3">Opt3</option>
    </select>
    <select id="combo1" class="combo" data-index="1">
        <option></option>
        <option val="Opt1">Opt1</option>
        <option val="Opt2">Opt2</option>
        <option val="Opt3">Opt3</option>
    </select>
</fieldset>

CSS

body {
    margin: 10px;
}

select {
    margin: 10px;
}

JavaScript

$('body').on('change', '.combo', function() {
    var selectedValue = $(this).val();
    
    var fieldset = $(this).parents('fieldset');

    if ($(this).find('option').size() > 2) {
        var newFieldset = fieldset.clone();
        var newComboBox = $(fieldset).children('.combo:first');
        var thisComboBoxIndex = parseInt($(this).attr('data-index'), 10);
        var newComboBoxIndex = thisComboBoxIndex + 1;

        $('.parentCombo' + thisComboBoxIndex).remove();

        if (selectedValue !== '') {
            newComboBox.attr('data-index', newComboBoxIndex);
            newComboBox.attr('id', 'combo' + newComboBoxIndex);
            newComboBox.addClass('parentCombo' + thisComboBoxIndex);
            newComboBox.find('option[val="' + selectedValue + '"]').remove();
            $('body').append(newFieldset);
        }
    }     
});