Заменяются параметры в onclick при динамическом создании объектов <a/> JavaScript [дубликат]

Скорее всего, проблема сводится к следующей ситуации:

for (var i = 1; i <= 3; i++) { 
  $("#link" + i).on("click", function() { 
    clickLink(i); 
  }); 
} 
 
function clickLink(index) { 
  console.log(index); 
}

<div id="link1">Link 1</div> 
<div id="link2">Link 2</div> 
<div id="link3">Link 3</div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

где всегда будет выводиться 4, так как на момент вызова функции обработчика i как раз и равняется 4

Исправить это можно, например, "захватом" текущего значения i:

for (var i = 1; i <= 3; i++) { 
  (function(index) { 
    $("#link" + i).on("click", function() { 
      clickLink(index); 
    }); 
  })(i); 
} 
 
function clickLink(index) { 
  console.log(index); 
}

<div id="link1">Link 1</div> 
<div id="link2">Link 2</div> 
<div id="link3">Link 3</div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Можно навесить обработчик через document, тогда не нужно будет навешивать обработчики на динамически созданные элементы. При таком подходе вообще не придется навешивать обработчик в цикле и проблемы со счетчиком не возникнет в принципе, а код будет меньше по объему и проще для понимания.

$(document).on('click', '.links', (e) => {
    let packege = 1; //вычисляем при необходимости
    clickLink(packege, e.currentTarget, e.currentTarget.id.toString());
});

Еще как вариант, вообще навесить обработчик по ссылке:

$(document).on('click', '.links', clickLink);

А всю логику получения параметров перенести в функцию clickLink, через неявно передаваемый объект event.

Если же очень хочется отставить все как есть, то самым быстрым решением будет использовать let вместо var при объявлении счетчиков в циклах.