How to call multiple ajax calls on a view?

See more:

MVC

jQuery

I have a requirement like, i have to make multiple jquery ajax calls and bind the data to multiple divs in my view.

The below is the code in my main view

@foreach (var item in Model)
   {
      <p>Chart name : @item.ChartName</p>
       <div>
           @{Html.RenderAction("GetChartData", "ChartsDashboard", new { Data = item });}
       </div>
       <br/>
   }

RenderAction will call another view whose code is like this :

<script>
//dynamically adding the divs based on the for loop
    var chrtdivid = "chrt"+ '@Model[0].ChartId.ToString()'
    $("#charts").append("<div id='" + chrtdivid + "'>hello world</div>")

    $(function () {
        $.ajax({
            type: "GET",
            url: "/api/ChartsAPI/" + '@Model[0].ChartId.ToString()',
            dataType: "json",
            success: function (seriesData) {

                //bind this series data to the dynamically added div
            }});});
    </script>

So in this requirement based on the foreach list value, there can be n no.of loops, so n no.of calls will be made to the jquery ajax.
But finally only the last div is bound with the data, but not all.

Is there any way to get the data to the divs on every web api call?