How to add same from input area when user press a button?

Question

I am doing a form right now, I want to automatically add another input area, same as the line above, when user press a button.

 <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>

This is a line of input area, I want to add the same html below the input area we have now when user press the "Add" button. Maybe using JQuery?

It should looks like this one.

This is what I tried:

function addLine() {
$('#1').clone().attr('id', '').appendTo('form');

}

For now, it seems work, but how should I do if I want to add id to the new created element, say, 2, 3, 4?

Also I am not sure am I did it the right, or best way.

Answer 1

Solution by 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);

However make sure that your back end is ready to handle that input.

EDIT: The solution might not be fancy and using clone() is completely fine too. To keep track of ids I would add a simple variable like n that I would increment every time a new input area is added, and then add it to id.

So, init

var n = 0; 

In addLine:

n++;

Set the id (doable in addLine too)

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

Answer 2

You can copy from a blueprint structure in the DOM and append your copy after the button.

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

Remove the onClick handler on the element and bind the event using jQuery.

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

See the fiddle here: JSFiddle