title: Switch toggle return to previous state when I click "No" in the alert prompt
body: <p>I created a switch toggle that allows the system administrator to activate/deactivate the login access of an account.</p>
  
  <p>After the admin click the switch toggle (the switch moving from state 1 to 0), it will prompt via alert box a confirmation (Do you want to activate / deactivate this account? Yes | No), whenever I click "no," I want it to return to its previous state (from 0 to 1).</p>
  
  <p>I manage to successfully do this if the state is "1" [The account is activated], but when it's the other way around, from status 0 to 1, the switch toggle doesn't return back to its previous state and gets stuck to state 1.</p>
  
  <p>It still sends the proper POST command tho (e.g. deactivates the account if it's activated, and vice versa), but the visual display is wrong.</p>
  
  <p>This is my code.</p>
  
  <p><strong>Javascript for the toggle switch</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>
  var chk;
      $(document).on('change', '.btn-change-status', function(e) {
        e.preventDefault();
        chk = $(this);
        var switch_status = $(this).attr('data-status');
        var account_status = (switch_status == 1) ? 0 : 1;
        var id  = $(this).attr('data-id');
        var confirm_alert = (switch_status == 1) ? confirm("Are you sure you want to deactivate this account?") : confirm("Are you sure you want to activate this account?");
          if (confirm_alert == true) {
           $.ajax({
                url: "/user/update-status",
                type: "POST",
                data: {
                  _token: "{{csrf_token()}}",
                  id: id,
                  status: account_status
                },
                success: function(data) {
                  if (data.success === true) {
                    alert("Account Successfully Updated!");
                    location.reload();
                  }
                }
  
              });
          }
          else {
            if(chk.checked) {
              chk.prop("checked", false);
            }
            else {
              chk.prop("checked", true);
            }
          }
      });
  </code></pre>
  
  <p><strong>EDIT:</strong> added the HTML part of the switch, although it's still in javascript coz I attached it to a dataTable.</p>
  
  <p><strong>HTML of the dataTable</strong></p>
  
  <pre class="lang-html prettyprint-override"><code>
   &lt;div class="card mb-3"&gt;
              &lt;div class="card-header"&gt;
                &lt;i class="fas fa-table"&gt;&lt;/i&gt;
                Accounts Management&lt;/div&gt;
              &lt;div class="card-body"&gt;
  
                &lt;button type="button" id="btn-add-account" class="btn btn-primary"&gt;Add Account&lt;/button&gt;
                &lt;div class="table-responsive mt-3"&gt;
                  &lt;table class="table table-bordered dt-responsive" id="table-accounts" width="100%" cellspacing="0"&gt;
                    &lt;thead&gt;
                      &lt;tr&gt;
                        &lt;th class="hidden"&gt;ID&lt;/th&gt;
                        &lt;th&gt;Username&lt;/th&gt;
                        &lt;th&gt;Email&lt;/th&gt;
                        &lt;th&gt;Role&lt;/th&gt;
                        &lt;th&gt;Date Created&lt;/th&gt;
                        &lt;th style="width: 15.5%"&gt;Actions&lt;/th&gt;
                      &lt;/tr&gt;
                    &lt;/thead&gt;
                    &lt;tfoot&gt;
                      &lt;tr&gt;
                        &lt;th class="hidden"&gt;ID&lt;/th&gt;
                        &lt;th&gt;Username&lt;/th&gt;
                        &lt;th&gt;Email&lt;/th&gt;
                        &lt;th&gt;Role&lt;/th&gt;
                        &lt;th&gt;Date Created&lt;/th&gt;
                        &lt;th style="width: 15.5%"&gt;Actions&lt;/th&gt;
                      &lt;/tr&gt;
                    &lt;/tfoot&gt;
                    &lt;tbody&gt;
                    &lt;/tbody&gt;
                  &lt;/table&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
  
          &lt;/div&gt;
          &lt;!-- /.container-fluid --&gt;
        &lt;/div&gt;
  
  </code></pre>
  
  <p><strong>Javascript of the dataTable</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>
  $(document).ready(function() {
      getRoles();
      var accounts;
       $('#account-management').addClass('active');
  
      accounts = $("#table-accounts").DataTable({
          ajax: {
            url: "/users/get-all-users",
            dataSrc: ''
          },
          responsive:true,
          "order": [[ 7, "desc" ]],
          columns: [
          { data: 'id'},
          { data: 'username' },
          { data: 'email'},
          { data: 'role.id'},
          { data: 'created_at'},
          { data: null,
            render: function ( data, type, row ) {
              var html = "";
              if (data.status == 1) {
                html += '&lt;span class="switch switch-sm"&gt; &lt;input type="checkbox" class="switch btn-change-status" id="'+data.id+'" data-id="'+data.id+'" data-status="'+data.status+'" checked&gt; &lt;label for="'+data.id+'"&gt;&lt;/label&gt;&lt;/span&gt;';
              } else {
                html += '&lt;span class="switch switch-sm"&gt; &lt;input type="checkbox" class="switch btn-change-status" id="'+data.id+'" data-id="'+data.id+'" data-status="'+data.status+'"&gt; &lt;label for="'+data.id+'"&gt;&lt;/label&gt;&lt;/span&gt;';
              }
                html += "&lt;button type='button' class='btn btn-primary btn-sm btn-edit-account mr-2' data-id='"+data.id+"' data-account='"+data.id+"'&gt;Edit&lt;/button&gt;";
                html += "&lt;button type='button' class='btn btn-secondary btn-sm btn-reset-password' data-id='"+data.id+"' data-account='"+data.id+"'&gt;&lt;i class='fas fa-key'&gt;&lt;/i&gt;&lt;/button&gt;";
  
              // &lt;button type='button' class='btn btn-primary btn-sm btn-edit' data-id='"+data.id+"' data-account='"+data.id+"'&gt;Edit&lt;/button&gt; 
              // html += "&lt;button class='btn btn-danger btn-sm btn-delete' data-id='"+data.id+"' data-account='"+data.id+"'&gt;Remove&lt;/button&gt;";
  
              return html;
            } 
          },
          ],
          columnDefs: [
          { className: "hidden", "targets": [0]},
           { "orderable": false, "targets": 4 }
          ]
      });
  
  </code></pre>
  
  <p>Thank you!</p>