title: update variable in jQuery after AJAX call
body: <p>My AJAX function is below working successfully until someone <code>resubmits the AJAX call without a page refresh</code>. In this case, the AJAX call uses the old value of var amount rather than an updated one.  Therefore, I need to update var amount at the end of my success function but am failing to do so. </p>
  
  <pre><code>$(document).on('click', '#updateBidButton', function (e) {
    e.preventDefault();
  
    var amount = ('#curr_bid').val()
    var expire_date = "&lt;?php echo $this-&gt;item['expire_date']?&gt;";
  
    $.ajax({
      type: 'post',
      url: "?module=items&amp;controller=index&amp;action=submit",
      dataType: "text",
      data: 'amount=' + amount + '&amp;expire_date=' + expire_date,
      beforeSend: function () {
        $('.auction_box').animate({
          'backgroundColor': '#ffdead'
        }, 400);
      },
      success: function (result) {
        if (result == 'ok') {
          $('.auction_box').animate({
            'backgroundColor': '#A3D1A3'
          }, 500);
          amount = $('#curr_bid').val();
          setTimeout(function () {
            $('.auction_box').css('background-color', '#FFF');
          } , 5000);
        }
      }       
    });
  });
  </code></pre>