title: Prevent subloop repeating within jquery
body: <p>Im trying to build a simple webtool using jQuery. I'm new using jQuery, so don't laugh ;-). It needs to show a car based on the selection menu and per car it needs to show and hide tinted windows while clicking on the windows. Its all working, but after switching cars the show and hide function of the selected windows are repeating on click (show/hide/show/hide) after clicking on them again. </p>
  
  <p>The more you switch within the select options, the more it repeats. How do i prevent this repeat from happening? </p>
  
  <p>It also needs to generate a price, right now its hardcoded within the window selection, but i need to have the prices different per car per windows, but this will come later. First i need to prevent this loop from happening. </p>
  
  <pre><code>&lt;div id='tintbuilder-container'&gt;
  
          &lt;div id='carselector'&gt;
                  &lt;h3 style='color:#FFF'&gt;&lt;center&gt;Voertuigselectie:&lt;/center&gt;&lt;/h3&gt;&lt;br&gt;
                  &lt;form class='selectcar'&gt;
                       &lt;select id='carselection' name='typecar'&gt;
                          &lt;option value=''&gt;Selecteer je auto&lt;/option&gt;
                          &lt;option value='sedan'&gt;Sedan&lt;/option&gt;
                          &lt;option value='station'&gt;Station&lt;/option&gt;
                          &lt;option value='hatchback'&gt;Hatchback&lt;/option&gt;
                          &lt;option value='coupe'&gt;Coupe&lt;/option&gt;
                          &lt;option value='overig'&gt;Overig&lt;/option&gt;
                      &lt;/select&gt;
                  &lt;/form&gt;
          &lt;/div&gt;
  
  
          &lt;script&gt;
          jQuery(document).ready(function($){
          var carlist = [ "sedan", "station", "hatchback", "coupe", "else" ];
          jQuery.each( carlist, function( i, val, list ) {
              $('#carselection').change(function () {
                      $('.hidecar').hide()
                      $('#' + this.value).show();
            $("#tintbuilder-container").append("&lt;div style='display:none;' id='"+ val + "' class='car hidecar'&gt;&lt;div class='selectionlist'&gt;&lt;/div&gt;"
          + "&lt;div class='selectionprice'&gt;Huidige selectie: &amp;euro;&lt;span class='"+ val + "price'&gt;0&lt;/span&gt;"
          + "&lt;div&gt;&lt;h3&gt;Selectie&lt;/h3&gt;&lt;ul class='" + val + "list'&gt;&lt;ul&gt;&lt;/div&gt;&lt;/div&gt;");
  
          var win = [ val + "rearwindow", val + "quarterwindow", val + "reardoorwindow", val + "frontdoorwindow" ];
  
          jQuery.each( win, function( i, win ) {
          $("#"+val+"").append("&lt;a&gt;&lt;div id='"+win+"-container'&gt;&lt;div class='tint' id='" + win + "'&gt;&lt;/div&gt;&lt;/div&gt;&lt;/a&gt;");
           $("#"+val+"").on("click", "#"+ win +"-container", function() {
               if( $("li").is("."+ win + "listitem") ) { $("."+ win + "listitem").remove();}
               else { $("." + val + "list").append($("&lt;li class='" + win + "listitem'&gt;" + win + "&lt;/li&gt;"));}
               $count = $("."+ val + "price");
               var $this = $(this);
               $("#"+ win +"").fadeToggle();
               if ($("."+ win + "on")[0]){
               $this.removeClass(""+ win + "on");
               $count.text(function(idx, txt) { return +txt - 200;})
               } else {
               $this.addClass(""+ win + "on");
               $count.text(function(idx, txt) { return +txt + 200;})
           }
          });
          });
          });
          });
          });
          &lt;/script&gt;
  </code></pre>
  
  <p>Edit: here's a codepen: <a href="https://codepen.io/Dutchlimits/pen/pmXKRK" rel="nofollow noreferrer">https://codepen.io/Dutchlimits/pen/pmXKRK</a></p>