[Javascript]動的に作成したコントロールに対して押下時イベント(関数・引数)を割り当てたい

Question

前提・実現したいこと

Javascriptで動的にコントロールを作成しています。
そのコントロールに対して、押下時イベントを割り当てたいのですが、引数がうまく渡せません。

お力を貸してください。

発生している問題・エラーメッセージ

引数が同じものしか渡せていません。

該当のソースコード

var ele = document.querySelector('#main');

for (var i = 0; i < 5; i++) {

	// ボタン作成
	var eleA = document.createElement('a');
	eleA.setAttribute('data' , i + 1);
	eleA.setAttribute('id'   , 'btnEdit');
	eleA.onclick = 'function(){post(i + 1);};
　　↑ここで「0～4」を引数として渡したいです（onclickではない方法でPOST送信でも可です）

	ele.appendChild(eleA);

}

// POST送信
function post(params, key='data', path='./next.php', method='post') {

	var form = document.createElement('form');
	form.method = method;
	form.action = path;

	var hiddenField   = document.createElement('input');
	hiddenField.type  = 'hidden';
	hiddenField.name  = key;
	hiddenField.value = params;

	form.appendChild(hiddenField);
	document.body.appendChild(form);
	form.submit();
};

試したこと

ID:btnEditに対して押下時イベントを割り当てましたが、NGでした。

補足情報（FW/ツールのバージョンなど）

Windows 10

Answer 1

複数のHTML要素に同じidを割り当てないでください
その上で

for (var i = 0; i < 5; i++) {
↓↓↓
for (let i = 0; i < 5; i++) {

Comments

[entaro12345]

ありがとうございます。
たしかに、同じIDを割り当てるのはNGですね。
勉強になります。