Javascript 使用jQuery克隆div并增加子类

我的HTML是：

<div id="product">
<div class="clonedInput" id="input">
        <div class="row">
            <div class="col-md-6 col-md-offset-1">

                    {!! Form::label('product','Product: ') !!}
                    <select name="product" size="1">
                        @foreach($products as $p)
                        <option value="{{ $p->name }}">{{ $p->name }}</option>
                        @endforeach
                    </select>
            </div>
            <div class="col-md-2 col-md-offset-1">
                    {!! Form::label('prodquant','Product Quantity: ') !!}
                    {!! Form::input('number','prodquant','1', ['class' => 'form-control', 'step' => 'any'])
                     !!}
            </div>
        </div>
        <div class="row">
            <div class="col-md-8 col-md-offset-1">
                    {!! Form::label('proddescription','Description: ') !!}
                    {!! Form::textarea('proddescription',null,['class' => 'form-control']) !!}
            </div>
        </div>
    <div class="removebtn"></div>
</div>

它可以很好地复制.clonedInput div，但是我需要.product、.prodquant和.proddescription的子类随着#输入的增加而增加

---

如果有人能为我指出正确的方向，告诉我如何在那里安装移除按钮，我将不胜感激

我建议使用类而不是

id

，这样就不必增加任何内容：

$(".cloneme").click(function(){
    $('#product').append($(".clonedInput").clone());
});

如果你真的想为了另一个目的增加课程，你可以这样做：

$(".cloneme").click(function(){
    var nextHTML = $(".clonedInput").clone();

    nextHTML.attr('id','input' + rowNum);
    nextHTML.find('.product').attr('class','product' + rowNum);
    nextHTML.find('.prodquant').attr('class','prodquant' + rowNum);
    nextHTML.find('.proddescription').attr('class','proddescription' + rowNum);

    nextHTML.appendTo('#product');
});

---

希望有帮助。

Tip：考虑使用模板标签（）来“C克隆”元素谢谢，但是我需要增加我在稍后处理表单中的数据时的数量，否则我只能得到一个产品而不是几个完美的！！非常感谢你！

$(".cloneme").click(function(){
    var nextHTML = $(".clonedInput").clone();

    nextHTML.attr('id','input' + rowNum);
    nextHTML.find('.product').attr('class','product' + rowNum);
    nextHTML.find('.prodquant').attr('class','prodquant' + rowNum);
    nextHTML.find('.proddescription').attr('class','proddescription' + rowNum);

    nextHTML.appendTo('#product');
});