我的jquery可以在悬停时更改div高度，但当我使用for循环创建2个div时，它只能使用第一个循环
我有包含jquery的JavaScript代码
它从变量结果中获取字符串，并为图像播放器创建1个div，为播放器的统计信息创建1个div
我使用循环来创建播放器，当我悬停图像时，它可以激活jquery悬停，将统计div高度从0更改为20vw，但它只在第一个循环上工作，我认为这是因为id，但第二个循环id与其他jquery配合良好
悬停在下方
你们能帮帮我吗？
无论如何，我会删除这篇文章，如果它太愚蠢谢谢：v

var result =[
    2,
    "name:Tom;bc:67;lp:77;fn:37;ic:65;ag:45;sp:56;st:54;pc:66", 
    "name:Thomas;bc:70;lp:44;fn:70;ic:44;ag:60;sp:70;st:30;pc:30"
];

for (var a = 1; a < result[0] + 1; a++){

  var players = result[a].split(";");
  var playername = players[0].split(":");
  var element = document.createElement("div");
  var elementc = document.createElement("div");
  var elements = document.createElement("div");
  
  for (var s = 1; s < 8; s++){
    var ps = document.createElement("p");
    ps.innerHTML = players[s] + "   ";
    elements.appendChild(ps);
  }

  element.id = playername[1];
  elementc.id = playername[1] + "id";
  elements.id = playername[1] + "stats";
  elementc.appendChild(element);
  document.getElementById('manage').appendChild(elementc);
  document.getElementById('manage').appendChild(elements);

  document.getElementById(playername[1] + "id").style.position = "Relative";
  document.getElementById(playername[1] + "id").style.position = "Relative";
  document.getElementById(playername[1] + "id").style.width = "87vw";
  document.getElementById(playername[1] + "id").style.margin = "0.5vw";
  document.getElementById(playername[1] + "id").style.height = "10vw";
  document.getElementById(playername[1] + "id").style.border = "1vw solid cyan";
  document.getElementById(playername[1]).style.position = "Relative";
  document.getElementById(playername[1]).style.cssFloat = "left";
  document.getElementById(playername[1]).style.width = "10vw";
  document.getElementById(playername[1]).style.height = "10vw";
  document.getElementById(playername[1]).style.backgroundImage = "url(Players/" + playername[1] + ".jpg";
  document.getElementById(playername[1]).style.backgroundSize = "cover";
  document.getElementById(playername[1] + "stats").style.position = "Relative";
  document.getElementById(playername[1] + "stats").style.backgroundColor = "lightgrey";
  document.getElementById(playername[1] + "stats").style.overflowY = "scroll";
  document.getElementById(playername[1] + "stats").style.width = "87vw";
  document.getElementById(playername[1] + "stats").style.height = "20";
  
  $("#" + playername[1] + "stats")
    .children().css("background", "linear-gradient(to right,#0D7377 50%, #ffffff 50%)");

  $("#" + playername[1] + "stats")
    .children().css("width", "fit-content");

  $("#" + playername[1] + "stats")
    .children().css("float", "left");

  $("#" + playername[1] + "stats")
    .children().css("margin", "2vw");

  $("#manage").children().css("margin-top", "30vw");
  //The hover here

  $("#" + playername[1] + "id").hover(
    function(){
      $("#" + playername[1] + "stats").animate({'height': '20vw'}, 'slow');
    },
    function(){
      $("#" + playername[1] + "stats").animate({'height': '0vw'}, 'slow');
    }
  );
}