Always displaying the last item of the array no matter what button is clicked in javaScript/Jquery

Question

I have a menu of 38 different items and after the item is displayed there is a + & - button. And when I press either of the buttons I want the item to be displayed with an alert so I see what I have clicked. But when I click a button the last item of the array is always displayed no matter which button I click.

var buttonDelete  = [];
var buttonAdd = [];
var n = 0;
$(document).ready(function(e) {
    $("#text").html("");
   
      for(var section in menu) {
          
        $("#text").append("<h2>"+section+"</h2>");
         
          for(var itemindex in menu[section]) {
              
            buttonAdd[n] = document.createElement("button");
              buttonAdd[n].innerHTML = " + ";
              buttonDelete[n]  = document.createElement("button");
              buttonDelete[n].innerHTML = " - ";   
              var item = menu[section][itemindex];
             
              $("#text").append("<strong> "+ item["name"] + " " + item["price"] + ":-" + "</strong>");
              $("#text").append(buttonAdd[n]);
              $("#text").append(buttonDelete[n]);
             
              $("#text").find(buttonAdd[n]).on("click", function(){
                 console.log(item["name"]);
                 alert(item["name"]);
             });
              $("#text").find(buttonDelete[n]).on("click", function(){
                console.log(item["item"]);
                alert(item["name"]);
              });
                        
             $("#text").append("<br />");     
             
             for(var cindex in item["contents"]) {
                $("#text").append(item["contents"][cindex] + " ");
            }
            $("#text").append("<hr />");
            $("#text").append("<br />");   
        }
    }
});