JQuery update the value after 1 click?

Question

I am trying to update the following span

<span class="help-block">Your card will automatically reload $<span id="autoAmount">0</span> when your balance is lower than your reload threshold.</span>

with the value taken from code below,

<div class="controls">
    <div class="btn-group radioButtons amountButtons" data-toggle="buttons-radio">
                @if (Model.PresetValues.Count > 0){
                     foreach (int value in Model.PresetValues) {
                        <button type="button" data-value="@value" class="btn amtButtons @(Model.chargeViewModel.ChargeAmount == value ? "active" : "")">$@value</button>
                     } 
                }                   
                <button type="button" data-value="other" class="btn toggleDiv toggleOnce amtButtons" data-toggle-id="#manualAmount">Other</button>
            </div>               
            <input type="hidden" class="radioHidden validate required validateAmount" value="" id="amount" name="ChargeAmount">

</div>

After I click the 'yes' button from this

<li class="control-group">
        <label for="autoReload" class="control-label">Auto Reload</label>
        <div class="controls">
            <div class="btn-group radioButtons radioToggleCollapse" data-toggle-id="#autoReloadExtra" data-toggle="buttons-radio">
                <button type="button" data-value="no" class="btn active">No</button>
                <button type="button" data-value="yes" class="btn">Yes</button>
            </div>
            <input type="hidden" class="radioHidden" value="@(Model.IsAutoReload ? "True" : "False")" id="autoReload" name="IsAutoReload">
        </div>
    </li>

I have the following script,

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>
    $.ajax({
        type: "POST"
    }).success(function() {
       var callAjax = $('.amtButtons').click(function () {
           $("#autoAmount").html($('#amount').val());
      });
   });       
</script>

This works relatively well, however I am encountering two issues.

1) I have to click the value twice for it to update

2) If I click 'other' twice, it shows $other, whereas I'd like it to display whatever is in the 'manualAmounts' value when it is clicked.

I tried making a fiddle... but don't really know how to use it properly. This at least can show a general layout of what I'm trying to do though

http://jsfiddle.net/vfJtG/

EDIT:

Everything works except for the span displaying $other if I click it twice still, does anyone know a workaround for this?

Answer 1

Have a look at this Fiddle and here's the Javascript:

$( document ).ready(function() {
    //Cache the selections
    var autoReloadCheck = $(".autoReloaded"),
        autoAmmount = $("#autoAmount"),
        ammount = $('#amount');

    //Replaced your two buttons with a simple checkbox
    autoReloadCheck.on('click', function(){
        if(!autoReloadCheck.is(':checked'))
            autoAmmount.html("0");
    });

    $('.amtButtons').click(function () {
        var $this = $(this); //Capture which button was clicked

        if($this.data("toggle-id") === "#manualAmount"){
             $this.data("value", $("#manualAmountInput").val()); //If the "other" was clicked, set the value according to what is in the input box
        }

        if(autoReloadCheck.is(':checked')){ //Is autoReload checked?
            autoAmmount.html($this.data("value"));
        }
    });
});

Update based on comment

New fiddle

var autoReloadCheck = $(".autoReloaded"),
    autoAmmount = $("#autoAmount"),
    ammount = $('#amount'),
    plusMinus = $(".plusminus"),
    otherValue = $('*[data-toggle-id="#manualAmount"]');

function updateOthervalue(newValue){
    otherValue.data("value", newValue);
    plusMinus.data("value", newValue);
    plusMinus.val(plusMinus.data("value"));
    updateReloadSpan(newValue);
}

function updateReloadSpan(newAmount){
    if(autoReloadCheck.is(':checked')){
        ammount.val(newAmount);
        autoAmmount.html(newAmount);
    }
}

autoReloadCheck.on('click', function(){
    if(!autoReloadCheck.is(':checked'))
        autoAmmount.html("0");
});

$(".minus").on('click', function() {
    if(plusMinus.data("value") >= 15){
        var newValue = otherValue.data("value") - plusMinus.data("increment");
        updateOthervalue(newValue);
    }
});

$(".plus").on('click', function() {
    if(plusMinus.data("value") < plusMinus.data("max")){
        var newValue = otherValue.data("value") + plusMinus.data("increment");
        updateOthervalue(newValue);
    }
});

$('.amtButtons').on('click', function() {
    var $this = $(this);

    if($this.data("toggle-id") === "#manualAmount"){
        $this.data("value", plusMinus.data("value"));
    }
    updateReloadSpan($this.data("value"));
});