title: Javascript dynamic switch doubling Ajax calls
body: <p>I am having a problem with a jQuery click function. When a user clicks a HTML button, my jQuery dynamically loads some styled checkbox's/toggle switches based upon their corresponding on/off state stored in a database.</p>
  
  <p>I then added a click function to each dynamically loaded toggle switch so that when a user clicks it, it updates the database with the new state, it then, with Ajax, calls the GetAllSwitches function again loading the current state of the switches from the DB back into the resultScreen.</p>
  
  <p>It works, updates the state in the DB correctly, but the program remembers previous 'clicks' and runs them all again followed by the new click state every time a user clicks. So on the first click it makes 1 http request, 2nd 2, 3rd 4, 4th 8 etc. The problem being after a few clicks the ajax calls become huge.</p>
  
  <p>I'm not that experienced in Javascript so I am aware my code is verbose and I am clearly missing something, but are there any fixes or better approaches to this?</p>
  
  <p>In summary what I want to achieve is:</p>
  
  <ol>
  <li>User clicks allSwitches</li>
  <li>Ajax call to a database which returns all objects with a toggle switch on screen</li>
  <li>Have the toggle switch's clickable which updates the database with new state</li>
  <li>Allow the switches to be clicked as many times as the user likes only making one update to the DB</li>
  </ol>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;fieldset&gt;
  &lt;legend&gt; Get All Lights Dynamically&lt;/legend&gt;
  &lt;input type="button" value="Show All" id="allSwitches"/&gt; 
  &lt;/fieldset&gt;
  
  &lt;fieldset&gt;
  &lt;div id='resultScreen'&gt;&lt;/div&gt;
  &lt;/fieldset&gt;
  </code></pre>
  
  <p><strong>JavaScript</strong></p>
  
  <pre><code>$(document).ready(function(){
  
      $("#allSwitches").click(function(){
  
      $.ajax({
          url: 'GetAll',
          type: 'GET',
          dataType: 'text',       
  
          success: function(data) {
              getAllSwitches(data)
           });
      });     
    });
  
  
  function getAllSwitches(data){
      var tr; 
      myData = $.parseJSON(data);
  
      for(var i = 0; i &lt; myData.length; i++){
          tr = $('&lt;tr/&gt;');
  
  
          if(myData[i].state=="On"){
          tr.append('&lt;div id="togs' + i + '"&gt;' + '&lt;label class="switch"&gt;' +
                    '&lt;input type="checkbox" class="' + myData[i].lightName +'" checked&gt;' +
                    '&lt;div class="slider round"&gt;&lt;/div&gt;'
                  +'&lt;/label&gt;' + '&lt;/div&gt;');
  
      tr.append("&lt;td&gt;" + myData[i].lightName + 
               " is " + myData[i].state + "&lt;/td&gt;");
  
      $('#resultScreen').append(tr);
  
      var className = '.' + myData[i]lightName;
      var lightName = myData[i].lightName;
      var state = "Off";
  
          upTog(className, lightName, state);
  
  
  
      } else if (myData[i].state=="Off"){
          tr.append('&lt;label class="switch"&gt;' +
                    '&lt;input type="checkbox" class="' + myData[i].lightName +'" &gt;' +
                    '&lt;div class="slider round"&gt;&lt;/div&gt;'
                  +'&lt;/label&gt;');
  
      tr.append("&lt;td&gt;" + myData[i].lightName + 
               " is " + myData[i].state + "&lt;/td&gt;");
  
  
      $('#resultScreen').append(tr);
  
      var className = '.' + myData[i].lightName;
      var lightName = myData[i].lightName;
      var state = "On";
  
      upTog(className, lightName, state);
  
      }
  }
  }
  
  function upTog(className, lightName, state){
  
  $(document).on('click', className, function() { 
  
      $.ajax({
          url: 'UpdateLight?lightName=' + lightName + "&amp;state=" + state,
          type: 'POST',
          dataType: 'text',
          success:function(data){
                  $.ajax({
                  url: 'GetAll',
                  type: 'GET',
                  dataType: 'text',       
  
                  success: function(data) {
                      $('#resultScreen').empty();
                      getAllSwitches(data);
                  }});    
          }   
      })
  });
  }
  </code></pre>
  
  <p>Many thanks.</p>