title: How can I get the current value from a variable when passing it to an event?
body: <p>I have the following problem. I'm making an ajax request to an API which returns a <strong>json</strong>. I iterate through the json object and list the results in li tags the tricky part comes here when I make the <em>li.OnClick()</em> event I need to pass the current index of the selected item but i always get the last one. I think it's because it is passed by reference not by value. How can I cope with this problem?</p>
  
  <p>Here is the code:    </p>
  
  <pre><code>$StiboJQuery.ajax({
       url: loqateApiEndpoint,
       type: 'POST',
       data: { "lqtkey":"key", "query":street, "country":country },
       success: function(response) {
              debugger;
              if(response.Status === "OK" &amp;&amp; response.output.length &gt; 0)
              {
                   $StiboJQuery('#' + divId).remove();
                   var ul = document.createElement('ul');
                   var div = document.createElement('div');
                   div.id = divId;
                   div.className = 'address-suggestions';
                   for(var i = 0; i &lt; response.output.length; i++)
                   {
                        var elNumber = [index: i];
                        var label = response.output[i];
                        var li = document.createElement('li');
                        li.setAttribute('Country', response.metadata[i].CountryName || '');
                        li.setAttribute('Street', response.metadata[i].DeliveryAddress || '');
                        li.setAttribute('City', response.metadata[i].Locality || '');
                        li.setAttribute('State', response.metadata[i].AdministrativeArea || '');
                        li.setAttribute('Postcode', response.metadata[i].PostalCode || '');
                        debugger;
                        li.innerHTML = response.output[i];
  
                        //Here is where I'm passing the i variable
                        li.onclick =  function() {
                            listItemClickEventHandler(this, div, isForBilling, i);
                         }
                         li.onmouseover = function(){
                            this.setAttribute("style", "background: #d7ebf9; padding: 3px 5px; cursor: pointer;");
                         }
                         li.onmouseout = function(){
                            this.setAttribute("style", "background: #fff; padding: 3px 5px;");
                         }
                          $StiboJQuery(ul).append(li);
                      }
                      $StiboJQuery(div).append(ul);
                      isForBilling ? $StiboJQuery("[id$='billingStreet']").after(div) : $StiboJQuery("[id$='shippingStreet']").after(div);
                  }
              }
          });
      }
      function getCountry(isForBilling) {
          return isForBilling ? $StiboJQuery("[id$='billingCountry']").val() : $StiboJQuery("[id$='shippingCountry']").val();
      }
      function getStreet(isForBilling) {
          return isForBilling ? $StiboJQuery("[id$='billingStreet']").val() : $StiboJQuery("[id$='shippingStreet']").val();
      }
  
      function listItemClickEventHandler(sender, container, isForBilling, num) {
      debugger;
          var idPart = isForBilling ? 'billing' : 'shipping';
          var captureApiEndpoint = "https://api.everythinglocation.com/address/capture";
          var country = getCountry(isForBilling);
          var street = getStreet(isForBilling);
  
          // And here is where I use it and I always get the value of 10
          $StiboJQuery.ajax({
              url: captureApiEndpoint,
              type: 'POST',
              dataType: "xml",
              data: 
              {
                  "lqtkey":"key",
                  "query":street,
                  "country":country,
                  "result": num
              },
              success: function(response) {
              debugger;
                  if(response.Status === "OK" &amp;&amp; response.output.length &gt; 0) {
                      var address = response.output;
                      console.log(address);
                  }
              }
          });
  
          $StiboJQuery("[id$='"+idPart+"Country']").val(sender.getAttribute('Country'));
          $StiboJQuery("[id$='"+idPart+"Street']").val(sender.getAttribute('Street'));
          $StiboJQuery("[id$='"+idPart+"City']").val(sender.getAttribute('City'));
          $StiboJQuery("[id$='"+idPart+"State']").val(sender.getAttribute('State'));
          $StiboJQuery("[id$='"+idPart+"PostalCode']").val(sender.getAttribute('Postcode'));
  
          $StiboJQuery(container).remove();
      }
  &lt;/script&gt;
  </code></pre>