Javascript 当用户按下按钮时，如何从输入区添加相同的内容？

我现在正在做一个表单，我想在用户按下按钮时自动添加另一个输入区域，与上面的行相同

 <div class="row" id="1">
                <div class="form-group col-lg-2">

                        <select class="form-control" id="select">
                            <option selected>Tag Name</option>
                            <option value="p">p</option>
                            <option value="br">br</option>
                        </select>

                </div>
                <div class="form-group col-lg-2">
                        <select class="form-control" id="class">
                            <option selected>Tag Class</option>
                            <option value="Day">Day</option>
                            <option value="BlockTime">BlockTime</option>
                            <option value="BlockTitle">BlockTitle</option>
                            <option value="Session">Session</option>
                            <option value="Person">Person</option>
                            <option value="Firm">Firm</option>
                        </select>                      
                </div>                    
                <div class="form-group col-lg-7">
                    <textarea class="form-control" rows="3" id="textArea">Please put the content inside this html tag.</textarea>         
                </div>
                <div class="form-group col-lg-1">
                        <input type="button" class="btn btn-default" onclick="addLine()" value="Add">
                </div>                        
                </div>

}

目前看来，这似乎是可行的，但如果我想向新创建的元素（比如2、3、4）添加id，该怎么办

此外，我也不确定我做得是否正确，或是最好的方式。

jQuery的解决方案

    var n = 8 // adjust it in some way
    var inputArea = ['<div class="form-group col-lg-'+n+'">',
'<textarea class="form-control" rows="3" id="textArea-'+n+'">',// let's be nice and not use same IDs twice
'Please put the content inside this html tag.',
'</textarea></div>'].join('') 
 $('.row').append(inputArea);

添加行：

n++;

设置id（在addLine中也可以）

---

您可以从DOM中的blueprint结构进行复制，并在按钮后追加副本

var addline = function() {
    var invisibleNewLine = jQuery('#blueprint').clone();
    var visibleNewLine = invisibleNewLine.removeClass('invisible');
    jQuery('#target').append(visibleNewLine);
};
jQuery('#add-line').click(addline);

删除元素上的

onClick

处理程序，并使用jQuery绑定事件

<button id="add-line" class="btn btn-default">Add</button>

添加

---

看看这里的小提琴：

你试过什么吗？你能告诉我们你试过什么吗？嗨@JayBlanchard我更新了我的帖子，谢谢，

$target.attr('id', 'inputArea-'+n);//Assuming that $target is the inputArea in question

var addline = function() {
    var invisibleNewLine = jQuery('#blueprint').clone();
    var visibleNewLine = invisibleNewLine.removeClass('invisible');
    jQuery('#target').append(visibleNewLine);
};
jQuery('#add-line').click(addline);

<button id="add-line" class="btn btn-default">Add</button>