带有HTML和Js的嵌套可重复字段

Question

我正在尝试制作可嵌套的可重复字段（通过html和jquery）。但是主要的问题是它仅在子项中添加了新项，而不在父项中添加了新项。请检查这支笔。这将有助于更多地了解：https://codepen.io/muaz123/pen/MLORoM

您可以在其中看到内部按钮起作用，而在外部则看不到。

下面是我的html代码

<div class="fields">
    <input type="name" placeholder="name">
    <div class="filedset">
        <divs class="fields">
            <div class="fieldset">
                <input type="text" name="name" placeholder="age">
                <br>
                <select name="select" id="">
                   <option value="1">Age</option>
                   <option value="2">nice</option>
                </select>
            </div>
            <button class="clone">Add new</button>
        </div>
    </div>
    <button class="clone">Add</button>
</div>

和js代码

jQuery(document).on('click','.clone', function(e){
    e.preventDefault();
    jQuery(this).parent('.fields').find('.fieldset').first().clone().insertAfter(jQuery('.fieldset').last()).find('input').val('');
});