Div add and remove using clone

Div add and remove using clone

by harshmadhani

HTML

<link rel="stylesheet" href="netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<div id="locationgroup">
                      <div class="span12 locationdiv" id="locationdiv1">
                        <div><br/><br/>Location</div>
                        <div class="span6" style="margin-left:0px">
                            <div class="control-group">
                                <input type="text"  placeholder="main location name" class="input-xlarge"/>
                            </div>
                            <div class="control-group">
                                <input type="text"  placeholder="email" class="input-xlarge"/>
                            </div>
                            <div class="control-group">
                                <input type="text"  placeholder="phone number" class="input-xlarge"/>
                            </div>
                        </div>
                        <div class="span5">
                            <div class="span12 ">
                                <div class="control-group">
                                    <input type="text"  placeholder="street" class="input-xlarge"/>
                                </div>
                                <div class="control-group">    
                                    <input type="text"  placeholder="suite/apartment number" class="input-xlarge"/>
                                </div>
                                <div>
                                    <input type="text"  placeholder="city" class="input-mini"/>
                                    <select name="country" id="country" class="input-mini">
                                        <option value="">AL</option>
                                    </select>
                                    <input type="text"  placeholder="zip" class="input-mini"/>
                  ...

JavaScript

$(document).ready(function(){
    $('#addlocation').on('click',function(){               
        var counter = $('#locationgroup .locationdiv:last').attr('id').substr(11);
        counter++;
        $('#locationdiv1').clone(true).attr('id','locationdiv'+counter).appendTo('#locationgroup')
        .find('input').val(''); 
    });
});
$('#removelocation').on('click',function(){
        var counter = $('#locationgroup .locationdiv:last').attr('id').substr(11);
        if(counter!=1){
            $('#locationdiv'+counter).remove();
            counter--;
        }
        else
            alert("Atleast one location required");
    });