jQueryで以下のようなプログラムを作成しました。
それぞれの"#no"+番号のdivをクリックした場合に、押したdivの番号のnameをアラートで表示させるプログラムです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>クリックテスト</title>
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css
/bootstrap.min.css">
</head>
<body>

<ul class="list-group" id="oomoto">
</ul>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></scri
pt>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></sc
ript>
<script>
var data =
{
   "1535525652": {"name": "ほにゃらら"},
   "1535508625": {"name": "こにゃくら"}
}
for(var i in data){
var h = '<li id="li'+i+'" class="list-group-item list-group-item-info">'
       +'<div id="no'+i+'">'+data[i].name+'</div>';
       + '</li>';
      $('#oomoto').append(h);
$(document).on('click', "#no"+i, function(){
  alert($('#no'+i).text());
});
}
</script>
</body>
</html>

しかし、期待通りの動きをしてくれません。
(1) JSONなので順番は関係ありませんが、表示が「こにゃくら」「ほにゃらら」の順番になっている。
(2) 「こにゃくら」をクリックしても「ほにゃらら」をクリックしても、アラートに出るのはどちらも「ほにゃらら」

どうしても解決したいのは(2)ですが、(1)と相関関係がありそうですし。
解決方法をご存知の方は、上記質問の片方でもいいのでご教授いただけると幸いです。