make diffrence between objects that created with clone() in java script

Good Day Friends. I have a problem... Thanks, if you help me I have a couple of inputs into a div. I copied that div with Clone function in java script (by click a button) and right now, I have two divs. but my problem:

1- I don't know, How can I get the values of inputs correctly (the input's names are the same)?

2- and I have a select input in div, that some inputs add or remove by choose each option of select input. Now after copied div, choose one option in div2, create changes in div1... and I don't want it !!

<div class="levels">
    <div class="add_senario_level">
        <span>Level 1</span>
        <form>
            <select name="condition" onchange="show_div(this,'shop during');">
                <option selected="selected" disabled="disabled">choose condition</option>
                <option>shop after registration</option>
                <option>shop during</option>
            </select>
            <div id="shop_during" style="display:none;">
                <input type="number" id="shop_during_num" name="shop_during_num" placeholder="Enter number">
                <select id="shop_during_time" name="shop_during_time">
                    <option selected="selected">hour after registeration</option>
                    <option>day after registeration</option>
                    <option>week after registeration</option>
                    <option>month after registeration</option>
                </select>
            </div>
            <div>
                <button type="button" class="newLevel"> Add New Level </button>
            </div>
        </form>
    </div>
</div>

<script>
    $(document).ready(function()
    {
        $(".newLevel").click(function()
        {
            $(".add_senario_level").clone().appendTo(".levels");
        });
    });

    function show_div(obj, id)
    {
        txt = obj.options[obj.selectedIndex].text;
        if (txt.match(id))
        {
            document.getElementById("shop_during").style.display = 'block';
        }
        else
        {
            document.getElementById("shop_during").style.display = 'none';
        }
    }
</script>

You can use jQuery's find function to find a child element and the attr function to get and set attribute values. You will want to do this to change on the id and name attributes for the input and select like below:

HTML

<input type="number" id="shop_during_num0" name="shop_during_num0" class="shop_input" placeholder="Enter number">

JavaScript

$(".newLevel").click(function()
{
    const count = $('.add_senario_level').length;
    const clone = $(`#add_senario_level${count - 1}`).clone();
    const input = clone.find(`#shop_during_num${count - 1}`);
    const select = clone.find(`#shop_during_time${count - 1}`);

    input.attr('name', `shop_during_num${count}`);
    input.attr('id', `shop_during_num${count}`);
    select.attr('name', `shop_during_time${count}`);
    select.attr('id', `shop_during_time${count}`);
    clone.appendTo(".levels");
});

In the show_div method, you can use $(obj) to reference the select that called the function and show or hide the correct element with

$(obj).parent().find('#shop_during').css('display', 'block');