Getting value of last clicked item from array

Question

Update #2: Updated scripts.

Goal

a) User selects a button. The value of the last button clicked + .current__amount = new__amount

b) No running total. Clicking the same button again should deselect it and then subtract that value from .new__amount then change the placeholder text using .html()

Problem

Right, now for whatever reason, clicking a button does not add or remove its value from the .new__amount.

I've console.log(buttons[i].value) and console.log(buttons[i].class) and can see that the for loop is printing the class and the value of these six buttons, which represent a bid in a silent auction $10, 25, 50 and have been stored in an array called var buttons = [], like I want.

scripts.js (Updated)

Almost there. Just need to make it so that only one button can be selected at a time.

/*-------------------------------------
STEP ONE: PLACE BID
--------------------------------------*/

$.ajax({
    url: "https://sheetsu.com/apis/4a8eceba",
    method: "GET",
    dataType: "json"
}).then(function(spreadsheet) {

    // Print current bid
    var currentBid = spreadsheet.result.pop().Bids;
    $(".current__amount").html("$" +currentBid);

    $('.button__form').on('click', function() {
        var value = $(this).val();
        if($(this).hasClass('is-selected')) {
            $(this).removeClass('is-selected');
            $(".check--one").css("color", "#ccc");
            currentBid = parseInt(currentBid) - parseInt(value);
        }
        else {
            $(this).addClass('is-selected');
            $(".check--one").css("color", "#ffdc00");
            currentBid = parseInt(currentBid) + parseInt(value);
        }
        $('.total__amount').html("$" + currentBid);
    });
});

Answer 1

this isnt really specific to your question structure but it should get you an idea of how it can work.

$(document).ready(function() {
  var totalAmount = 0;
  $('.button__form').on('click', function() {
    var value = $(this).val();
    if($(this).hasClass('selected')) {
      $(this).removeClass('selected');
      totalAmount = parseInt(totalAmount) - parseInt(value);
    }
    else {
      $(this).addClass('selected');
      totalAmount = parseInt(totalAmount) + parseInt(value);
    }    
    $('.total').html(totalAmount);
  });
});

.selected {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="button__form" value=10>10</button>
<button class="button__form" value=25>25</button>
<button class="button__form" value=50>50</button>
<button class="button__form" value=100>100</button>
<button class="button__form" value=250>250</button>
<button class="button__form" value=500>500</button>
<br/><br/>
<div class="total"><div>

EDIT with one button selectable at a time:

$(document).ready(function() {
  var baseAmount = 0;
  var totalAmount = baseAmount;
  $('.button__form').on('click', function() {
    var value = $(this).val();
    if($(this).hasClass('selected')) {
      $(this).removeClass('selected');
      totalAmount = parseInt(totalAmount) - parseInt(value);
    }
    else {
      $('.button__form').removeClass('selected'); // remove selected css from all the other buttons
      $(this).addClass('selected');
      totalAmount = baseAmount; // reset the totalAmount to the original base amount
      totalAmount = parseInt(totalAmount) + parseInt(value);
    }    
    $('.total').html(totalAmount);
  });
});

.selected {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="button__form" value=10>10</button>
<button class="button__form" value=25>25</button>
<button class="button__form" value=50>50</button>
<button class="button__form" value=100>100</button>
<button class="button__form" value=250>250</button>
<button class="button__form" value=500>500</button>
<br/><br/>
<div class="total"><div>