Multiple AJAX calls on the same page and binding the response correctly to corresponding elements
<p>I have a webpage where I have a table like following : </p>

<pre><code>===========================================
Vehicle Num |  GPS speed | GPS Location
===========================================
            |            | 
            |            |
</code></pre>

<p>So after <code>document.ready()</code>, I am firing AJAX call for each vehicle row to get the GPS info for corresponding vehicle. Here is my code : </p>

<pre><code>var length = 47; // I have 47 vehicles
    var vehicleNum = "";
    var ajaxURL = "";
    $('document').ready(function(){
        for(var i = 1; i &lt; length; i++)
        {
            vehicleNum = $("#"+i+"-vehicleNum").val();
            //strip spaces from vehicle number
            vehicleNum = vehicleNum.replace(/\s/g, '');
            ajaxURL = "http://www.vehicletrack.biz/api/vehlastlocation?token=K2ZPJFJP3A&amp;vehname="+vehicleNum;

            //start ajax request
            $.ajax({
                url: ajaxURL,
                dataType: "json",
                success: function(data) {

                    if(data.result[0].error)
                    {
                        //error
                    }
                    else
                    {
                        // alert(i);
                        alert(i);
                        $("#"+i+"-speed").html(data.result[0].speed);
                    }
                }
            });

        }
    });
</code></pre>

<p>I am getting speed value updated only for the 47th vehicle. What should be the correct approach (and optimized one)? Any suggestions please.</p>

<p><strong>EDIT</strong>
This is one of the JSON response</p>

<pre><code>{"result":[{"longitude":76.391529,"latitude":27.974347,"location":"Delhi-Ajmer Expressway - Madhosinghpura- Alwar - Rajasthan - India","speed":0,"dttime":"14 Feb 2016 00:38:47","ignition":0,"vehicle_name":"HR38T7623","icon":0}]}
</code></pre>