title: jquery .last() firing multiple times when clicking last element only once
body: <p>I have some tabs with radio buttons in them and want to check when the last option is clicked (by that I mean any radio button in the last tab, not the last radio button).</p>
  
  <p>This is my html:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div id="smartwizard" class="sw-main sw-theme-default"&gt;
    &lt;ul class="nav nav-tabs step-anchor"&gt;
      &lt;li class="optietabs nav-item done"&gt;
        &lt;a href="#step-0" class="nav-link"&gt;Lijmlaag
  &lt;button class="infotooltip" data-tooltip="lijmlaag is gewoon een dikke laag lijm"&gt;
  &lt;i class="fas fa-info-circle"&gt;&lt;/i&gt;&lt;/button&gt;&lt;/a&gt;
        &lt;div id="step-0" class="" style="display: none;"&gt;
          &lt;form class="" id="step__form" method="post"&gt;
            &lt;div class="tab-content2"&gt;
              &lt;input type="radio" id="Wit-Lijmlaag" name="Lijmlaag" value="Wit(prijsberekening)($m2*4);"&gt;
              &lt;label for="Wit-Lijmlaag"&gt;
                &lt;div class="afwerking-tab"&gt;
                  &lt;img class="materiaal-image" src="assets/images/custom/noimgstep.jpg" alt="Wit"&gt;
                  &lt;p&gt;&lt;strong&gt;Wit&lt;/strong&gt;&lt;/p&gt;
                &lt;/div&gt;
              &lt;/label&gt;
              &lt;input type="radio" id="Grijs-Lijmlaag" name="Lijmlaag" value="Grijs(prijsberekening)($stuksprijs+15);"&gt;
              &lt;label for="Grijs-Lijmlaag"&gt;
                &lt;div class="afwerking-tab"&gt;
                  &lt;img class="materiaal-image" src="assets/images/custom/noimgstep.jpg" alt="Grijs"&gt;
                  &lt;p&gt;&lt;strong&gt;Grijs&lt;/strong&gt;&lt;/p&gt;
                &lt;/div&gt;
              &lt;/label&gt;
            &lt;/div&gt;
          &lt;/form&gt;
        &lt;/div&gt;
      &lt;/li&gt;
      &lt;li class="optietabs nav-item done"&gt;
        &lt;a href="#step-1" class="nav-link"&gt;Laminaat
  &lt;button class="infotooltip" data-tooltip="Test test test test&amp;nbsp;"&gt;
  &lt;i class="fas fa-info-circle"&gt;&lt;/i&gt;&lt;/button&gt;&lt;/a&gt;
        &lt;div id="step-1" class="" style="display: none;"&gt;
          &lt;form class="" id="step__form" method="post"&gt;
            &lt;div class="tab-content2"&gt;
              &lt;input type="radio" id="Anti-slip laminaat-Laminaat" name="Laminaat" value="Anti-slip laminaat(prijsberekening)($o*5);"&gt;
              &lt;label for="Anti-slip laminaat-Laminaat"&gt;
                &lt;div class="afwerking-tab"&gt;
                  &lt;img class="materiaal-image" src="assets/images/custom/noimgstep.jpg" alt="Anti-slip laminaat"&gt;
                  &lt;p&gt;&lt;strong&gt;Anti-slip laminaat&lt;/strong&gt;&lt;/p&gt;
                &lt;/div&gt;
              &lt;/label&gt;
              &lt;input type="radio" id="Glans laminaat-Laminaat" name="Laminaat" value="Glans laminaat(prijsberekening)($m2*4);"&gt;
              &lt;label for="Glans laminaat-Laminaat"&gt;
                &lt;div class="afwerking-tab"&gt;
                  &lt;img class="materiaal-image" src="assets/images/custom/noimgstep.jpg" alt="Glans laminaat"&gt;
                  &lt;p&gt;&lt;strong&gt;Glans laminaat&lt;/strong&gt;&lt;/p&gt;
                &lt;/div&gt;
              &lt;/label&gt;
              &lt;input type="radio" id="Mat laminaat-Laminaat" name="Laminaat" value="Mat laminaat(prijsberekening)($m2*4);"&gt;
              &lt;label for="Mat laminaat-Laminaat"&gt;
                &lt;div class="afwerking-tab"&gt;
                  &lt;img class="materiaal-image" src="assets/images/custom/noimgstep.jpg" alt="Mat laminaat"&gt;
                  &lt;p&gt;&lt;strong&gt;Mat laminaat&lt;/strong&gt;&lt;/p&gt;
                &lt;/div&gt;
              &lt;/label&gt;
              &lt;input type="radio" id="Geen-Laminaat" name="Laminaat" value="Geen"&gt;
              &lt;label for="Geen-Laminaat"&gt;
                &lt;div class="afwerking-tab"&gt;
                  &lt;img class="materiaal-image" src="assets/images/custom/noimgstep.jpg" alt="Geen"&gt;
                  &lt;p&gt;&lt;strong&gt;Geen&lt;/strong&gt;&lt;/p&gt;
                &lt;/div&gt;
              &lt;/label&gt;
            &lt;/div&gt;
          &lt;/form&gt;
        &lt;/div&gt;
      &lt;/li&gt;
      &lt;li class="optietabs nav-item active"&gt;
        &lt;a href="#step-2" class="nav-link"&gt;Afwerking&lt;/a&gt;
        &lt;div id="step-2" class=""&gt;
          &lt;form class="" id="step__form" method="post"&gt;
            &lt;div class="tab-content2"&gt;
              &lt;input type="radio" id="Contoursnijden-Afwerking" name="Afwerking" value="Contoursnijden(prijsberekening)($m2*30);"&gt;
              &lt;label for="Contoursnijden-Afwerking"&gt;
                &lt;div class="afwerking-tab"&gt;
                  &lt;div class="ribbon ribbon-top-right"&gt;
                    &lt;span&gt;Meest gekozen&lt;/span&gt;
                  &lt;/div&gt;
                  &lt;img class="materiaal-image" src="assets/images/custom/noimgstep.jpg" alt="Contoursnijden"&gt;
                  &lt;p&gt;&lt;strong&gt;Contoursnijden&lt;/strong&gt;&lt;/p&gt;
                &lt;/div&gt;
              &lt;/label&gt;
              &lt;input type="radio" id="Schoonsnijden-Afwerking" name="Afwerking" value="Schoonsnijden"&gt;
              &lt;label for="Schoonsnijden-Afwerking"&gt;
                &lt;div class="afwerking-tab"&gt;
                  &lt;img class="materiaal-image" src="assets/images/custom/noimgstep.jpg" alt="Schoonsnijden"&gt;
                  &lt;p&gt;&lt;strong&gt;Schoonsnijden&lt;/strong&gt;&lt;/p&gt;
                &lt;/div&gt;
              &lt;/label&gt;
            &lt;/div&gt;
          &lt;/form&gt;
        &lt;/div&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  
  
  <p>This is my jquery function:</p>
  
  <pre><code>$("#smartwizard input:radio").on("click", function(e, anchorObject, stepNumber, stepDirection, stepPosition) {
    var form_data = $("#formsid form").serialize();
  
    $('#formaataantaltab').removeClass('formaataantal-done');
    $('#formaataantaltab').addClass('formaataantal');
  
    $.ajax({
      type:'post',
      url:"catalog/calcdiv.php",
      data:({form_data: form_data}),
      success:function(data){
  
        var content = $( $.parseHTML(data) );
        $( "#ajaxresult" ).empty().append( content );
        $('#prijsonder').empty().append($('#prijs').html());
         // indicate the ajax has been done, release the next step
         $("#smartwizard").smartWizard("next");
      }
    });
  
    $laatsteopties = $(".optietabs").last();
    $($laatsteopties).on("change", function() {
      console.log('last option clicked');
    });
  
    $(".optietabs").each(function(){
      $(this).on("click", function() {
          $([document.documentElement, document.body]).animate({
              scrollTop: $(this).offset().top
          }, 0);
      })
    });
  });
  </code></pre>
  
  <p>Where this part is logging when a last option is clicked in the console:</p>
  
  <pre><code>  $laatsteopties = $(".optietabs").last();
    $($laatsteopties).on("change", function() {
      console.log('last option clicked');
    });
  </code></pre>
  
  <p>The problem is when I click one radio button, I see the console logging <code>last option clicked</code> multiple times, in this case 3, instead of just one time each radio button click.</p>
  
  <p>Why is that? What am I doing wrong?</p>