title: Unable to get updated values of HTML elements
body: <p>I am trying to add a click event to a button that finds HTML elements by class and then adds each of them to an object with their name attribute as property name and the value attribute as the value.</p>
  <pre><code>$(function(){
    $('#saveButton').click(function() {
      let data = {};
  
      for (elem of $('.className')) {
        data[elem.getAttribute('name')] = elem.getAttribute('value');
      }
  
     console.log(data);
    });
  });
  </code></pre>
  <p>This, however, only ever gives me the initial values of the elements. If I change the values (they are input fields) and the event is triggered again, it does not find the updated values. What's more confusing to me is that if I move <code>console.log(data);</code> right under the definition of <code>data</code>, the object already has properties and values, even when triggering the event the very first time. What am I doing wrong here?</p>