附加包含输入的元素的副本

Question

这是我的JS：

$('.options_button').click(function() {
    $( ".new_input" ).last().clone().appendTo( ".options" );
});

这是我的HTML：

              <div class="options">
                <h2>Options</h2>
                <span class="input input--kuro">
                    <input id="inputID" class="input__field input__field--kuro" type="text" id="input-7" placeholder="..." />
                    <label class="input__label input__label--kuro" for="input-7"></label>
                </span>
                <span class="input input--kuro">
                    <input id="inputID" class="input__field input__field--kuro" type="text" id="input-8" placeholder="..."/>
                    <label class="input__label input__label--kuro" for="input-8"></label>
                </span>
                <span class="input input--kuro new_input">
                    <input id="inputID" class="input__field input__field--kuro" type="text" id="input-9" placeholder="..."/>
                    <label class="input__label input__label--kuro" for="input-9"></label>
                </span>
            </div>
            <button class="options_button">
                <i class="fa fa-plus"></i>
                <p>Option</p>
            </button>

单击“我的按钮克隆”，其中一个包含输入(和标签)，并将其附加到其他输入(和标签)下面。我以为我很聪明，但问题是它不仅克隆了空白输入字段，而且当输入被填充时，它也克隆了输入的内容。因此，克隆输入显然不是前进的方向。

有人能告诉我如何修改我所做的事情吗？我知道使用jQuery添加新输入是可能的，但我不只是想这样做，我想添加span以及它包含的标签和输入的空白副本。

Answer 1

尝尝这个

$('.options_button').click(function() {
    $( ".new_input" ).last().clone().appendTo( ".options" ).find('input').val('');
});

示例