I have this:

 <div class="cable-config">
            <span>Select Entries</span>
          
            <div class="cable-choose">
              <button id="Home" value="5.00">50 Entries<br>$5.00</button>
              <button value="10.00">100 Entries<br>$10.00</button>
              <button>250 Entries<br>$25.00</button>
              <button>500 Entries<br>$50.00</button>
            </div>
            <p>By entering, you agree to our Terms of Service, Official Rules, and Privacy Policy.</p>
          </div>
      </div>

      <script>
         var buttonValue = ""
          $('button').on('click', function(){
            $('button').removeClass('active_button');
            $(this).addClass('active_button');
            // var fired_button = $(this).val();
            //  alert(fired_button);
        });

        //Home button active on page load
        $(document).ready(function(){
            $('#Home').addClass('active_button');
        });

what it does it on button click, set the class to active_button.

Now what I am trying to do is get the value of class active_button when I click a new button. As you can see, i try to retrieve the value of active_button, but it returns undefined. what am i doing wrong?

function myfunction() {
  var valueOfButton = $('active_button').val();
  console.log(valueOfButton);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="cable-config">
  <span>Select Entries</span>

  <div class="cable-choose">
    <button id="Home" value="5.00">50 Entries<br>$5.00</button>
    <button value="10.00">100 Entries<br>$10.00</button>
    <button>250 Entries<br>$25.00</button>
    <button>500 Entries<br>$50.00</button>
  </div>
  <p>By entering, you agree to our Terms of Service, Official Rules, and Privacy Policy.</p>
</div>

<div class="product-price">
  <button onclick="myfunction()" class="cart-btn">Continue To Payment</button>
</div>