title: javascript looping through array and accessing key : value
body: <p>I've looked through quite a few questions but can't figure this out:</p>
  
  <p>I am strugling with some JS.</p>
  
  <p>I have a config array for a form field character counter, like:</p>
  
  <pre><code>var charwatch = [
    {key: 'headline', value: 60}, 
    {key: 'subheading', value: 40}
  ];
  </code></pre>
  
  <p>It represents all the ID's of fields I want to watch, along with their corresponding max character counts.</p>
  
  <p>The actual character counter / limiter works fine - the problem I am having is providing the above data to it.</p>
  
  <p>I am trying to loop through that config and execute a function in each loop, passing key and value each time.</p>
  
  <pre><code>for(p in charwatch) {
  
    element = charwatch[p].key;
    jq-element = '#'+element;
    count = charwatch[p].value;
  
    $(jq-element).keyup(function() {
      check_max_chars(element, count); // external function   
      console.log(element);
    });
  }
  </code></pre>
  
  <p>It's kind of working, but I am finding that console.log(element) (in the .keyup function) is always "subheading", never "heading". So everything works exactly as it should for the subheading field, but not at all for the heading field.</p>