title: How can I unbind this .click action?
body: <p>I'm trying to make this switch function so that when the on button is already clicked and the person clicks off, the on buttons CSS goes back to normal. I also want the switch to be set already on default. I've tried that too but had no luck.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  
  &lt;head&gt;
  
      &lt;title&gt;Toggleswitch&lt;/title&gt;
      &lt;link rel="stylesheet" type="text/css" href="main.css"&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src='script.js' type='text/javascript'&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;div class="switch-container"&gt;
          &lt;button id="darkmodeon"&gt;ON&lt;/button&gt;
          &lt;button id="darkmodeoff"&gt;OFF&lt;/button&gt;
  
      &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>body{
      background-color: black;
  }
  
  .switch-container{
      display: flex;
      justify-content: space-between;
      background-color: white;
      border-radius: 50px;
      padding: 5px;
      width: 135px;
  
  }
  
  #darkmodeon{
      width: 50px;
      height: 50px;
      border-radius: 100%;
      border: none;
      color: #a5a5a5;
      font-family:"calibri light";
      font-size: 15px;
      font-weight: bold;
      background-color: #e8e8e8;
  }
  
  #darkmodeoff{
      width: 50px;
      height: 50px;
      border-radius: 100%;
      border: none;
      color: #a5a5a5;
      font-family:"calibri light";
      font-size: 15px;
      font-weight: bold;
      background-color: #e8e8e8;
  }
  </code></pre>
  
  <p>jQuery:</p>
  
  <pre><code>$(document).ready(function(){
  
      var darkon = "#darkmodeon";
      var darkoff = "#darkmodeoff";
  
      $(darkon).click(function(){
          $(this).css({
              "background-color": "#66e86a",
              "color": "white" ,
              "transition": "all 0.3s ease"   
          });
      });
  
      $(darkoff).click(function(){
          $(this).css({
              "background-color": "#66e86a",
              "color": "white" ,
              "transition": "all 0.3s ease"   
          });
          $(this).unbind('click', darkon);
      });
  
  
  
  });
  </code></pre>