I'm trying to load the ajax into two different divs

Question

I'm trying to load the ajax into two different divs, however I inspect the console and the web page is still putting the data into one div, even though it is called within the ajax code to two different divs.

<script>$(document).ready(function(){

    $.ajax({
      url: "http://developer.api.cnet.com/rest/v1.0/techProductSearch",
      type: "get",
      data: { viewType:"json", iod: "none", callback: "phone", partKey:"2nnae6wsj2w72yqhcwu4v7sg", partTag:"2nnae6wsj2w72yqhcwu4v7sg", query: "iphone 5", productId:"31303113" },
      dataType: "jsonp",
      success: ipod
    });

    });
    function ipod(data) {
var count = 0;
    console.log(data);
$.each(data.CNETResponse.TechProducts.TechProduct, function(index,value) {

    console.log("Name: "+data.CNETResponse.TechProducts.TechProduct[count].Name.$);
    var datastring = '<tr>'+'<td class="searchItem">'+data.CNETResponse.TechProducts.TechProduct[count].Name.$+'</td> </tr>';
    $('#tabs-1').append(datastring);
    console.log("$('#tabs-1').append(datastring)");

    count ++;
    });
         }</script>
         <script>$(document).ready(function(){

    $.ajax({
      url: "http://developer.api.cnet.com/rest/v1.0/techProductSearch",
      type: "get",
      data: { viewType:"json", iod: "none", callback: "phone", partKey:"2nnae6wsj2w72yqhcwu4v7sg", partTag:"2nnae6wsj2w72yqhcwu4v7sg", query: "Samsung Note 3", productId:"31303113" },
      dataType: "jsonp",
      success: ipod
    });

    });
    function ipod(data) {
var count = 0;
console.log(data);
$.each(data.CNETResponse.TechProducts.TechProduct, function(index,value) {

    console.log("Name: "+data.CNETResponse.TechProducts.TechProduct[count].Name.$);
    var datastring = '<tr>'+'<td class="searchItem">'+data.CNETResponse.TechProducts.TechProduct[count].Name.$+'</td> </tr>';
    $('#tabs-2').append(datastring);
    console.log("$('#tabs-2').append(datastring)");
    count ++;
    });
     }</script>

HTML

<div id="tabs-1">
<p></p>
</div>
<div id="tabs-2">
<p></p>
</div>

Answer 1

You have two functions both called ipod. You need to give them a unique name, otherwise one will override the other. Call the second one 'ipod2', then set you second ajax call to use ipod2 as the success callback.

Answer 2

<script>

    $(document).ready(function(){

        $.ajax({
          url: "http://developer.api.cnet.com/rest/v1.0/techProductSearch",
          type: "get",
          data: { viewType:"json", iod: "none", callback: "phone", partKey:"2nnae6wsj2w72yqhcwu4v7sg", partTag:"2nnae6wsj2w72yqhcwu4v7sg", query: "iphone 5", productId:"31303113" },
          dataType: "jsonp",
          success: ipod
        });

    });

    function ipod(data) {

        $.each(data.CNETResponse.TechProducts.TechProduct, function(i,v) {

            var datastring = '<div class="searchItem">'+v[i].Name + '</div>';
            $('#tabs-'+ i).append(datastring);

        });
     };

 </script>