Condense repetitive jQuery .click function I'm looking for a better way of writing this repetitive jQuery function:

(function($) {
  var mobileAmount = 300;

  $('#_100').click(function() {
    $('*').removeClass('-amount-active');
    $('#_100').addClass('-amount-active');
    mobileAmount = 100;
  });
  $('#_200').click(function() {
    $('*').removeClass('-amount-active');
    $('#_200').addClass('-amount-active');
    mobileAmount = 200;
  });
  $('#_300').click(function() {
    $('*').removeClass('-amount-active');
    $('#_300').addClass('-amount-active');
    mobileAmount = 300;
  });

  ...

})( jQuery );


There is a number of amount buttons and each time one is clicked it receives the active class for styling and updates the mobileAmount variable.
Steps to fix this:


Add class 'amount-button' to all buttons
Add attribute data-mobileamount to all buttons and assign values like
100, 200, .. to each button.


For example:
&lt;button class="amount-button" data-mobileamount="100" &gt;Mobile Amount 100&lt;/button &gt;
&lt;button class="amount-button" data-mobileamount="200"&gt;Mobile Amount 200&lt;/button&gt;

 (function($) {
  var mobileAmount = 300;
  $('.amount-button').click(function() {
    $('*').removeClass('-amount-active');
    $(this).addClass('-amount-active');
    mobileAmount = $(this).data('mobileamount');
  });
})( jQuery );