auto generated textbox with google auto completeplace

Question

I am implementing auto generated textbox with google auto completeplace. But it is happening in only on first tetbox only rest of textbox is not caching auto completeplace. textbox is auto generated when add button is click. Image of autogenerated textbox

Here is the code of main page containing table

<div class="table-responsive">
    <table class="table">
        <thead>
            <tr>
                <th width="20px">#</th>
                <th>Nearest Location</th>
            </tr>
        </thead>
        <tbody id="product">

            <?php require_once("input.php") ?>


        </tbody>
    </table>
    <table class="table">
        <tbody>
            <tr id="product">
                <td></td>

                <td align="right"><input type="button" name="add_item" value="Add More" onClick="addMore();" /></td>
                <td align="left"><input type="button" name="del_item" value="Delete" onClick="deleteRow();" /></td>
                <td align="right" width="120px"></td>
                <td width="160px" align="right"></td>
            </tr>
        </tbody>
    </table>
</div>

Here is the code of input.php

<tr class="product-item float-clear" style="clear:both;">
 <td><input type="checkbox" name="item_index[]" /></td>
 <td><input class="form-control" type="text" name="item_naddress[]" id="location" />
 <input type="text" class="form-control" id="clat[]" name="clat[]">
 <input type="text" class="form-control" id="clong[]" name="clong[]"></td</tr>

Here is the code of add button

function addMore() {
$("<tbody>").load("input.php", function() {
        $("#product").append($(this).html());
}); }

And here is the code of google auto completepalce

function initAutocomplete() {
// Create the autocomplete object, restricting the search to geographical
// location types.
autocomplete = new google.maps.places.Autocomplete(
    /** @type {!HTMLInputElement} */(document.getElementById('location')),
    {types: []});

// When the user selects an address from the dropdown, populate the address
// fields in the form.
autocomplete.addListener('place_changed', fillInAddress);}



function fillInAddress() {
// Get the place details from the autocomplete object.
var place = autocomplete.getPlace();
document.getElementById('clat[]').value = place.geometry.location.lat();
document.getElementById('clong[]').value = place.geometry.location.lng();}

I know i am getting it some where wrong can anyone tell me please how to fix it. Thanks in advance. Kindly help me out

Answer 1

Your html code

<div class="table-responsive">
    <table class="table">
        <thead>
            <tr>
                <th width="20px">#</th>
                <th>Nearest Location</th>
            </tr>
        </thead>
        <tbody id="product_table">
                 <?php require_once("input.php") ?>
        </tbody>
    </table>
    <table class="table">
        <tbody>
            <tr id="product">
                <td></td>

                <td align="right"><input type="button" name="add_item" value="Add More" onClick="addMore();" /></td>
                <td align="left"><input type="button" name="del_item" value="Delete" onClick="deleteRow();" /></td>
                <td align="right" width="120px"></td>
                <td width="160px" align="right"></td>
            </tr>
        </tbody>
    </table>
</div>

The code of input.php

<tr class="product-item float-clear" style="clear:both;">
 <td><input type="checkbox" name="item_index[]" /></td>
 <td><input class="form-control location" type="text" name="item_naddress[]" id="location" />
 <input type="text" class="form-control product-lat" id="clat[]" name="clat[]">
 <input type="text" class="form-control product-long" id="clong[]" name="clong[]"></td>
</tr>

The code of add button

function addMore() {
                $("<tbody>").load("input.php", function() {
                        $("#product_table").append($(this).html());
                        var locationid = Math.random().toString(36).substring(7);
                        $('#product_table tr:last').find('.location').attr('id',locationid);
                        initAutocomplete(locationid);
                }); 
     }

The code of google auto completepalce

function initAutocomplete(locationid) {
                autocomplete = new google.maps.places.Autocomplete((document.getElementById(locationid)));
                autocomplete.inputId = locationid;

                autocomplete.addListener('place_changed', function() {
                     var place = autocomplete.getPlace();
                    $('#'+this.inputId).closest('tr').find('input.product-lat').val(place.geometry.location.lat());
                    $('#'+this.inputId).closest('tr').find('input.product-long').val(place.geometry.location.lng());
                });
            }

     initAutocomplete('location');