title: jQuery .click vs .change
body: <p>I'm just starting learning Javascript and jQuery (1 day in!). I ran into an issue yesterday that I eventually worked through, but have no idea why the change worked.  </p>
  
  <p><strong>TLDR; In jQuery, why does <code>.change</code> trigger a toggle/checkbox via an id tag when <code>.click</code> does not?</strong></p>
  
  <p>Longer explanation below:</p>
  
  <p>I'm hoping to understand why and find out if what I did was really the correct way to fix the problem I encountered.</p>
  
  <p>I'm trying to create a list of items that can be toggled on and off and update the backend via AJAX.  When I built my sample list of two, when I would click one button, it would toggle ALL of the buttons.</p>
  
  <p>I was calling via class (was not unique), so I moved each to a unique id and then the jQuery <code>.click</code> function stopped working.  After a few hours of beating my head against the wall, I changed from <code>.click</code> to <code>.change</code> - and it started working.</p>
  
  <p>QUESTION:  Why does <code>.change</code> trigger fine using an id tag when <code>.click</code> does not?</p>
  
  <p>Why doesn't this work as is?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>  $(document).ready(function() {
      $('#toggle1').click(function() {
        var current_status = $('#engineer1').text();
        $('#engineer1').html('Changed 1');
      });
    });
  
    $(document).ready(function() {
      $('#toggle2').click(function() {
        var current_status = $('#engineer2').text();
        $('#engineer2').html('Changed 2');
      });
    });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet"&gt;
  &lt;script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"&gt;&lt;/script&gt;
  
  &lt;input id="toggle1" type="checkbox" checked data-toggle="toggle" data-on="Ready" data-off="Not Ready" data-onstyle="success" data-offstyle="danger"&gt;
  &lt;div id="engineer1"&gt;Should Change&lt;/div&gt;
  
  &lt;input id="toggle2" type="checkbox" checked data-toggle="toggle" data-on="Ready" data-off="Not Ready" data-onstyle="success" data-offstyle="danger"&gt;
  &lt;div id="engineer2"&gt;Should Change&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>