Remove Items from ASP.Net DropDownlist while copy (clone) using jQuery

The DropDownList 1 cloned always contains the value "2022-006" selected in the master DropDownList 1.

And the DropDownList 2 cloned from master DropDownList 2 is empty

On the DropDownList cloned I need this output

DDL1 cloned without the value "2022-006", because this value it's selected value in DDL1 master.

DDl2 cloned with the value "child", because this value it's selected value in DDL2 master.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("[id*=btnClone]").bind("click", function () {
            var index = $("#container select").length + 1;
 
            //Clone the DropDownList
            var ddl1 = $("select[id$=ddl1]").clone();
            var ddl2 = $("select[id$=ddl2]").clone();
 
            //Set the ID and Name
            ddl1.attr("id", "ddl1_" + index);
            ddl1.attr("name", "ddl1_" + index);
 
            ddl2.attr("id", "ddl2_" + index);
            ddl2.attr("name", "ddl2_" + index);
 
            //[OPTIONAL] Copy the selected value
            var selectedValue = $("select[id$=ddl1] option:selected").val();
            ddl1.find("option[value = '" + selectedValue + "']").attr("selected", "selected");
 
            //ddl2.find("option[value = '" + $("[id$=ddl2] option:selected").val() + "']").attr("selected", "selected");
 
            $('#container select').each(function () {
                ddl2.find('option[value="' + $(this).find('option:selected').val() + '"]').remove();
            });
 
            //var selectedValue2 = $("select[id$=ddl2] option:selected").val();
            //ddl2.find("option[value = '" + selectedValue2 + "']").attr("selected", "selected");
 
            //Append to the DIV.
            $("#container").append(ddl1);
            $("#container").append("<br /><br />");
            $("#container").append(ddl2);
 
            return false;
        });
    });
</script>

<div id="container">
    <div>
        <span id="ctl00_ContentPlaceHolder1_Label1">DDL1</span>
        <select name="ctl00$ContentPlaceHolder1$ddl1" id="ctl00_ContentPlaceHolder1_ddl1" class="pure-u-23-24" style="background-color: Yellow;">
            <option selected="selected" value="">[ == Please Select == ]</option>
            <option value="">2022-006</option>
            <option value="">2022-007</option>
            <option value="">2022-008</option>
            <option value="">2022-009</option>
            <option value="">2022-010</option>
            <option value="">2022-011</option>
            <option value="">2022-012</option>
            <option value="">2022-013</option>
            <option value="">2022-014</option>
            <option value="">2022-015</option>
        </select>
    </div><br />
    <div>
        <span id="ctl00_ContentPlaceHolder1_Label2">DDL2</span>
        <select name="ctl00$ContentPlaceHolder1$ddlddl2" id="ctl00_ContentPlaceHolder1_ddlddl2" class="pure-u-23-24" style="background-color: Yellow;">
            <option value="">[ == Please Select == ]</option>
            <option value="Child">Child</option>
        </select>
    </div><br />
    <div>
        <input type="submit" name="ctl00$ContentPlaceHolder1$btnClone" value="Clone" id="ctl00_ContentPlaceHolder1_btnClone" /><br /><br />
    </div>
</div>