Here is something i am trying to do. I want to add jquery autocomplete to all the input boxes. Initially i have only 2 boxes, user can dynamically add multiple boxes. Autocomplete works in first two boxes but fails in the dynamically added buttons.

hers the fiddle for the code : <http://jsfiddle.net/HG2hP/>

code: 

HTML: 

```
<!doctype html>
<html>

    <head>
        <title>TakeMeHome</title>
        <!-- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> -->
        <!--<script type="text/javascript" src="js/jquery-1.9.0.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.10.0.custom.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.10.0.custom.min.js"></script>-->
         <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
         <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
         <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
         <script type="text/javascript" src="js/app.js"></script>
         <link type="text/css" rel="stylesheet" href="css/design.css"/> 

    </head>

    <body>
        <center>
                Your Place:<input class="address" id="source" type="text"/><br/>
                <div id= "div1">Friend1:<input class="address" id="friend1" type="text"/></div><br/>
                <pre>
                <div id="button">Add!</div> <div id="button2">Remove</div></br>
            </pre>
            <div id="sumbit_button">GO!</div>
            <div id="map" style = "width: 500px; height: 500px"></div>

        </center>

    </body>

</html>

```

JS

```
$(document).ready(function() {

var geocoder;
var map;
var marker;
var friends_cnt = 1;
var friends = [];
var distance = [];

$('#button').click(function() {
    if (friends_cnt < 11) {
        $('<div  id = div' + (friends_cnt + 1) + '>Friend' + (friends_cnt + 1) + ':<input type="text" class="address"  id="friend' + (friends_cnt + 1) + '"/></div>').insertAfter('#div' + friends_cnt);
        friends_cnt++;
    } else {
        console.log("Limit reached");
    }
});

$('#button2').click(function() {
    if (friends_cnt > 1) {
        $('#friend' + friends_cnt).remove();
        $('#div' + friends_cnt).remove();
        friends_cnt--;
    }
});

geocoder = new google.maps.Geocoder();

$(function() {
    $(".address").autocomplete({
        source : function(request, response) {
            geocoder.geocode({
                'address' : request.term
            }, function(results, status) {
                response($.map(results, function(item) {
                    return {
                        label : item.formatted_address,
                        value : item.formatted_address,
                        latitude : item.geometry.location.lat(),
                        longitude : item.geometry.location.lng()
                    }
                }));
            })
        },
    });
});

$('#sumbit_button').on("click", function() {
    console.log("button clicked");
    var a = [];
    a.push($("#source").val());
    for ( i = 1; i <= friends_cnt; i++) {
        a.push($("#friend" + i).val());
    }

    console.log("a :");
    console.log(a);

    var gurl = "http://maps.googleapis.com/maps/api/distancematrix/json";

    console.log("gurl :" + gurl);
    $.ajax({
        url : gurl,
        data : {
            origins : a.join('|').replace(/ /g, '+'),
            destinations : a.join('|').replace(/ /g, '+'),
            sensor : false
        },
        success : function(response) {
            console.log("response type :");
            console.log( typeof response);
            if ( typeof response == "string") {
                response = JSON.parse(response);
            }
            var rows = response.rows;
            for (var i = 0; i < rows.length; i++) {
                distance[i] = [];
                for (var j = 0; j < rows[i].elements.length; j++) {
                    distance[i][j] = rows[i].elements[j].distance.value;
                }
            }
        }
    });
    console.log("No.of friends is " + friends_cnt);
    console.log(distance);
});

```

});

CSS

```
input {
margin: 10px 4px;
}

#button, #button2 {

    width: 70%;
    margin: 0 auto;
}

.ui-autocomplete {
    background-color: white;
    width: 300px;
    border: 1px solid #cfcfcf;
    list-style-type: none;
    padding-left: 0px;
}

.ui-helper-hidden-accessible {
    display: none;
}

```

As I am using classes concept to add auto-complete, I should get the results.

Can you please let me know where I am wrong?