title: jQuery text changing only after second click
body: <p>I'm new to javascript and jQuery, and I'm having trouble finding what's wrong with my code. I've written a very simple script that's supposed to change the text of a span on click, but I have to do two clicks to make it work. I have a slider, and the slider works perfectly on click, so I know that it's working on the first click, yet the text takes two clicks to change, and the two events are supposed to happen together. This is the code:</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() {
  
    $(".slider").click(function() {
  
      $(".btn").toggleClass("movement");
  
      var newPrice1 = "59.99";
      if ($(".price1-span").text() == "19.99") {
        $(".price1-span").text(newPrice1)
      } else {
        $(".price1-span").text("19.99");
      }
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* GENERAL */
  
  * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }
  
  body {
    font-family: 'Josefin Sans', sans-serif;
    background-image: url(/bbbackground.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  
  hr {
    width: 50%;
    margin: 0px auto;
  }
  
  
  /* H1 */
  
  h1 {
    text-align: center;
    margin: 4vh auto 30px auto;
    color: #0B3142;
  }
  
  
  /* DECISION */
  
  .decision {
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
    color: #0B3142;
  }
  
  
  /* SLIDER &amp; SLIDER BTN */
  
  .slider {
    height: 20px;
    width: 40px;
    margin: auto 20px;
    background-color: #0F5257;
    border-radius: 10px;
    position: relative;
    cursor: pointer;
  }
  
  .btn {
    height: 20px;
    width: 20px;
    position: absolute;
    background-color: white;
    border-radius: 50%;
    transform: scale(0.8);
  }
  
  .movement {
    left: 20px;
  }
  
  
  /* PLAN CONTAINER */
  
  #container {
    display: flex;
    justify-content: center;
  }
  
  #container div {
    border: 2px solid black;
    border-radius: 10px;
  }
  
  
  /* BASIC, PROFESSIONAL, DIAMOND */
  
  .basic {
    padding: 50px 40px;
    background-color: rgb(238, 238, 238, 80%);
    text-align: center;
    line-height: 40px;
    transition: .5s;
  }
  
  .basic:hover {
    transform: scale(1.05);
    background-color: #114b66;
    color: white;
  }
  
  .basic:hover h3 {
    color: white;
  }
  
  .basic:hover button {
    color: black;
    box-shadow: 0px 5px 5px black;
  }
  
  
  /* BASIC H3 */
  
  .basic h3 {
    color: #114b66;
    margin-top: -50px;
  }
  
  .basic h2 {
    font-size: 45px;
    margin-bottom: 20px;
  }
  
  .red {
    color: red;
  }
  
  
  /* SPAN DOLLAR SIGN */
  
  .price {
    margin-top: 15px;
    font-size: 20px !important;
  }
  
  .price1-span {
    font-size: 45px !important;
  }
  
  
  /* LEARN MORE BUTTON */
  
  button {
    margin-top: 100px;
    width: 160px;
    height: 40px;
    background-color: #1d8e96;
    cursor: pointer;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 3px;
    border-radius: 10px;
    border-style: none;
    box-shadow: 0px 5px 5px rgb(151, 151, 151);
    color: white;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
  
    &lt;meta charset="UTF-8"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt; Pricing Component &lt;/title&gt;
  
    &lt;link rel="stylesheet" href="style.css"&gt;
  
    &lt;link rel="preconnect" href="https://fonts.googleapis.com"&gt;
    &lt;link rel="preconnect" href="https://fonts.gstatic.com" crossorigin&gt;
    &lt;link href="https://fonts.googleapis.com/css2?family=Josefin+Sans&amp;display=swap" rel="stylesheet"&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;h1&gt; Limited Time Offer! &lt;/h1&gt;
    &lt;div class="decision"&gt;
      &lt;p&gt; Monthly &lt;/p&gt;
      &lt;div class="slider"&gt;
        &lt;div class="btn"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;p&gt; Anually &lt;/p&gt;
    &lt;/div&gt;
  
    &lt;div id="container"&gt;
      &lt;div class="basic"&gt;
        &lt;h3&gt; Master Plan &lt;/h3&gt;
        &lt;h2 class="price"&gt; $ &lt;span class="price1-span"&gt; 19.99 &lt;/span&gt;&lt;/h2&gt;
        &lt;hr&gt;
        &lt;p&gt; 1 TB Storage &lt;/p&gt;
        &lt;hr&gt;
        &lt;p&gt; 5 Sites Allowed &lt;/p&gt;
        &lt;hr&gt;
        &lt;p&gt; Free email account &lt;/p&gt;
        &lt;hr&gt;
        &lt;p&gt; Full Account Access &lt;/p&gt;
        &lt;hr&gt;
        &lt;button&gt; learn more &lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"&gt;&lt;/script&gt;
    &lt;script src="script.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>