Question

How can I target a subset of all buttons with a specific class? What i’m trying to accomplish is, that only one button with P or S can be selected at a time. If a user clicks on a specific “P” button it removes the highlight class from every other “P” button, same with “S”.

http://jsbin.com/adopuz/1/edit

$(':button').on('click', function() {

      var typeid = $(this).attr('value');
      $(this).addClass('highlight');

      if(typeid == 'P') {
        $('.primary').val(0);

        $(':button').removeClass('highlight');

        var opts = $(this).parent().find('input').eq(0).val(1);


      }

      if(typeid == 'S') {

      $('.static').val(0);
      var optp = $(this).parent().find('input').eq(1).val(1);

      }

    });

HTML

  <div id= "US">
    This is the US
  <div id="Monday">

<input name='' value='1' class="primary" type=''>
<input name='' value='0' class="static" type=''>


<input type='button' value='P' class='P'>
<input type='button' value='S' class='S'>

  </div>

    <div id="Tuesday">

<input name='' value='1' class="primary" type=''>
<input name='' value='0' class="static" type=''>

<input type='button' value='P' class=''>
<input type='button' value='S' class=''>


  </div>

      <div id="Wednesday">

<input name='' value='1' class="primary" type=''>
<input name='' value='0' class="static" type=''>


<input type='button' value='P' class=''>
<input type='button' value='S' class=''>

  </div>
  </div>

Answer 1

First of all, you have a little error in your HTML: you’ve only set the ‘P’ or ‘S’ class in the first couple of buttons. The next ones have ” as class. You must set the class for the following code to work.

Fixed that, you should first unset all the ‘highlight’ classes, and then set the one you’re interested in:

http://jsbin.com/adopuz/8/edit

$(':button').on('click', function() {

  var typeid = $(this).attr('value');

  if(typeid == 'P') {
    $('.primary').val(0);

    $(':button.P').removeClass('highlight');
    $(this).addClass('highlight');

    var opts = $(this).parent().find('input').eq(0).val(1);
  }

  if(typeid == 'S') {
    $('.static').val(0);

    $(':button.S').removeClass('highlight');
    $(this).addClass('highlight');

    var optp = $(this).parent().find('input').eq(1).val(1);
  }
});