title: Get last tag data on change
body: <p>I have this code:</p>
  
  <pre><code>var i = 0;
  $('#jobs').change(function() {
    var id = $(this).select2('data')[i].id;
    var txt = $(this).select2('data')[i].text;
    $('#jobSection').append('&lt;fieldset&gt;&lt;legend&gt;' + txt + '&lt;/legend&gt;&lt;input type="text" class="form-control" name="size_' + id + '" placeholder="Size"&gt;&lt;br/&gt;&lt;select class="form-control" name="type_' + id + '"&gt;&lt;option&gt;Type&lt;/option&gt;&lt;option value="1"&gt;Type 1&lt;/option&gt;&lt;option value="2"&gt;Type 2&lt;/option&gt;&lt;/select&gt;&lt;/fieldset&gt;');
    i++
  });
  </code></pre>
  
  <p>With that I am appending extra input fields for each tag.</p>
  
  <p>But it works only if I select tags by order otherwise it takes previous tag data.</p>
  
  <p>I understand that problem is in <code>i</code> because this is not actual loop but change event.<br/>
  So I want to know how to get just last tag data on change?</p>
  
  <p>Full example is <a href="https://jsfiddle.net/pegcxh74/" rel="nofollow">here</a></p>