javascript - フォーム内の複数の要素を複製する

Question

このコードを使用して、同じ div の複数のフォーム要素を複製しようとしています: 唯一の問題は、デバイスのような複数のエントリからの値ではなく、最初の頻度値のみが保存されることです。

<script type="text/javascript">
    $(document).ready(function() {
        $('#btnAdd2').click(function() {
            var num2     = $('.clonedInput2').length;
            var newNum2  = new Number(num2 + 1);

              var num3     = $('.clonedInput3').length;
            var newNum3  = new Number(num2 + 1);

            var newElem2 = $('#in' + num2).clone().attr('id', 'in' + newNum2);
            newElem2.find(":button").remove();
            newElem2.children(':first')
            .attr('id', 'device' + newNum2)
            .attr('name', 'device' + newNum2);

            var newElem3 = $('#in2' + num2).clone().attr('id2', 'in2' + newNum2);
            newElem3.children(':first')
            .attr('id', 'frequency' + newNum2)
            .attr('name', 'frequency' + newNum2);

            $('#in' + num2).after(newElem2);
            $('#btnDel2').attr('disabled','');

            if (newNum2 == 4)
                $('#btnAdd2').attr('disabled','disabled');
        });

        $('#btnDel2').click(function() {
            var num2 = $('.clonedInput2').length;

            $('#in' + num2).remove();
            $('#btnAdd2').attr('disabled','');

            if (num2 - 1 == 1)
                $('#btnDel2').attr('disabled','disabled');
        });

        $('#btnDel2').attr('disabled','disabled');
    });
</script>

<div id="in1" style="margin-bottom:4px;" class="clonedInput2">

    Device(s): <input type="text" name="device1" id="device1" /> Frequency: <input type="text" name="frequency1" id="frequency1" />
    <input type="button" id="btnAdd2" value="Add device" />
    <input type="button" id="btnDel2" value="Remove device" />
    </div>