jQuery不需要的selectedIndex

Question

 function getrecipe(q) {
  var apiKey = "";
  $.ajax({
    url: "https://api.spoonacular.com/recipes/search",
    data: "apiKey=" + apiKey + "&query=" + q,
    async: 'true',
    success: GetReci
  });

  function GetReci(response) {
    // console.log(response)
    var reci = "";
    var i = 0;
    var GetRecipe_Arr = response.results;
    $.each(GetRecipe_Arr, function(index,value){
      var title = GetRecipe_Arr[i].title;

      i = i + 1;
    })

    $('#recipeoutput').html(reci);

    $('#recipeoutput li').on('tap', function (e) {
      recipeIndex = $(this).index();
      $(":mobile-pagecontainer").pagecontainer("change", "#searchrecipedetailpage", { role: "page" 
    });
    });

    $(document).on('pageshow', '#searchrecipedetailpage', function () {
      var id = GetRecipe_Arr[recipeIndex].id
      console.log(id)
      var title = GetRecipe_Arr[recipeIndex].title;
      $.ajax({
        url: "https://api.spoonacular.com/recipes/" + id + "/information",
        data:  "apiKey=" + apiKey + "&includeNutrition=true",
        async: 'true',
        success: function(response){
          console.log(response);
        }
      });
   })
}

The first time search the id was fine...but after the second time search, I get enter image description here extra id that is not I tapped on. Sorry for my bad explanations, how can i improve my codes and make it work well?