Dynamic Address bar.

by techsin

HTML

<div class="container">
    <div class="sample">
     <p>Address <span class='num'>1</span></p>
     <p class='hide Remove'><a href="#">remove destination</a></p>
        <input type="text" >
        <textarea id="" rows="10" ></textarea>
       
    </div>
    <p class='Add'><a href="#">Add another Address</a></p>
</div>

CSS

* {margin: 0; padding: 0; }
.container {
    font-family: sans-serif;
    max-width: 400px;
    margin: 10px;
    padding: 15px;
    border:solid gray 1px;
    min-width:400px; overflow: auto;
    margin: 15px;
} 
textarea {  width: 95%; resize: none;  padding: 3px; }
input { padding: 4px; margin-right: 5px; margin-bottom: 8px;}
.hide {display: none; }
.sample:not(:first-of-type) { margin-top: 15px;}
a { color:purple; text-decoration: none; }

JavaScript

var s = $('.sample'), c= $('.container'), total=1;

$('.Add>a').click(function(){addSample();});


function addSample() {
   var clone = s.first().clone();
   clone.find('.Remove').toggle().click(function(){ rmvSample($(this)); });
   clone.find('.num').text(++total);
   clone.insertBefore(c.children(":last-child"));
}

function rmvSample(x) {
    total--;
    x.parent().remove();
    updateIndex();  
}

function updateIndex(){
    $('.sample').each(function(i){
        $(this).find('.num').text(i+1);
    });
}