javascript jquery html css twitter-bootstrap

JQuery add/remove class is not working properly

I have a form as shown below

What should happen is that when 'All days' button is clicked obviously all the days are set to active, weekdays only Mon - Fri etc.

I have the following jQuery which is toggling classes

    $(document).ready(function () {
        $("#allDays").on('click', function (event) {
            console.log("1");
            $("button[name = 'weekdaysbutton']").addClass('btn-primary');
            $("button[name = 'weekenddaysbutton']").addClass('btn-primary');
        });
        $("#allWkDays").on('click', function (event) {
            console.log("2");
            $("button[name = 'weekdaysbutton']").addClass('btn-primary');
            $("button[name = 'weekenddaysbutton']").removeClass('btn-default');
        });
        $("#allWkEnds").on('click', function (event) {
            console.log("3");
            $("button[name = 'weekdaysbutton']").removeClass('btn-default');
            $("button[name = 'weekenddaysbutton']").addClass('btn-primary');
        });
    });

But if I click the 'Weekdays' only it highlights Mon-Fri but then if I click 'All Weekends', my Mon to Fri are still highlighted and this happens which ever other button i click, it doesn't appear to be adding my classes correctly.

HTML

<div class="form-horizontal">
<div class="form-group">
    <label class="col-lg-2 control-label" for="allDays">
        Days of the week
    </label>
    <div class="col-lg-4">
        <button id="allDays" name="allDays" class="btn btn-green"
            type="button">
            All Days
        </button>
        <button id="allWkDays" name="allWkDays" class="btn btn-green"
            type="button">
            Weekdays Only
        </button>
        <button id="allWkEnds" name="allWkEnds" class="btn btn-green"
            type="button">
            Weekends Only
        </button>
    </div>
</div>
</div>
<div class="form-horizontal">
    <div class="form-group">
        <div class="col-lg-2"></div>
        <div class="col-lg-4">
            <button id="mon" name="weekdaysbutton" class="btn btn-default"
                type="button">Mon</button>
            <button id="tue" name="weekdaysbutton" class="btn btn-default"
                type="button">Tue</button>
            <button id="wed" name="weekdaysbutton" class="btn btn-default"
                type="button">Wed</button>
            <button id="thur" name="weekdaysbutton" class="btn btn-default"
                type="button">Thur</button>
            <button id="fri" name="weekdaysbutton" class="btn btn-default"
                type="button">Fri</button>
            <button id="sat" name="weekenddaysbutton" class="btn btn-default"
                type="button">Sat</button>
            <button id="sun" name="weekenddaysbutton" class="btn btn-default"
                type="button">Sun</button>
        </div>
    </div>
</div>

I can't see where I going wrong as I'm hitting the correct consolelog for each button click.

When I check the dev tools though it displays weird as show below

Initial page load

Clicked 'All Weekdays' button

Or is there a better way of doing this completely?

I have a working copy on fiddle but it doesn't work in my code http://jsfiddle.net/2pcgnz0w/1/

Solution

Your problem was that you weren't removing the right classes.

Your removeClass('btn-default') should be removeClass('btn-primary')

$(document).ready(function() {
  $("#allDays").on('click', function(event) {
    $("button[name = 'weekdaysbutton']").addClass('btn-primary');
    $("button[name = 'weekenddaysbutton']").addClass('btn-primary');
  });
  $("#allWkDays").on('click', function(event) {
    $("button[name = 'weekdaysbutton']").addClass('btn-primary');
    $("button[name = 'weekenddaysbutton']").removeClass('btn-primary');
  });
  $("#allWkEnds").on('click', function(event) {
    $("button[name = 'weekenddaysbutton']").addClass('btn-primary');
    $("button[name = 'weekdaysbutton']").removeClass('btn-primary');
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.css" />
<div class="form-horizontal">
  <div class="form-group">
    <label class="col-lg-2 control-label" for="allDays">
        Days of the week
    </label>
    <div class="col-lg-4">
      <button id="allDays" name="allDays" class="btn btn-green" type="button">
            All Days
        </button>
      <button id="allWkDays" name="allWkDays" class="btn btn-green" type="button">
            Weekdays Only
        </button>
      <button id="allWkEnds" name="allWkEnds" class="btn btn-green" type="button">
            Weekends Only
        </button>
    </div>
  </div>
</div>
<div class="form-horizontal">
  <div class="form-group">
    <div class="col-lg-2"></div>
    <div class="col-lg-4">
      <button id="mon" name="weekdaysbutton" class="btn btn-default" type="button">Mon</button>
      <button id="tue" name="weekdaysbutton" class="btn btn-default" type="button">Tue</button>
      <button id="wed" name="weekdaysbutton" class="btn btn-default" type="button">Wed</button>
      <button id="thur" name="weekdaysbutton" class="btn btn-default" type="button">Thur</button>
      <button id="fri" name="weekdaysbutton" class="btn btn-default" type="button">Fri</button>
      <button id="sat" name="weekenddaysbutton" class="btn btn-default" type="button">Sat</button>
      <button id="sun" name="weekenddaysbutton" class="btn btn-default" type="button">Sun</button>
    </div>
  </div>
</div>

To go even further and allow a double click to remove the classes you could do the following :

$(document).ready(function() {
  var all = false
  $("#allDays").on('click', function(event) {
    if ($("button[name = 'weekdaysbutton']").hasClass('btn-primary') && $("button[name = 'weekenddaysbutton']").hasClass('btn-primary')) {
      $("button[name = 'weekdaysbutton']").removeClass('btn-primary');
      $("button[name = 'weekenddaysbutton']").removeClass('btn-primary');
    } else {
      all = true
      $("button[name = 'weekdaysbutton']").addClass('btn-primary');
      $("button[name = 'weekenddaysbutton']").addClass('btn-primary');
    }
  });
  $("#allWkDays").on('click', function(event) {
    if ($("button[name = 'weekdaysbutton']").hasClass('btn-primary') && !all) {
      $("button[name = 'weekdaysbutton']").removeClass('btn-primary');
    } else {
      all = false
      $("button[name = 'weekdaysbutton']").addClass('btn-primary');
      $("button[name = 'weekenddaysbutton']").removeClass('btn-primary');
    }
  });
  $("#allWkEnds").on('click', function(event) {
    if ($("button[name = 'weekenddaysbutton']").hasClass('btn-primary') && !all) {
      $("button[name = 'weekenddaysbutton']").removeClass('btn-primary');
    } else {
      all = false
      $("button[name = 'weekenddaysbutton']").addClass('btn-primary');
      $("button[name = 'weekdaysbutton']").removeClass('btn-primary');
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.css" />
<div class="form-horizontal">
  <div class="form-group">
    <label class="col-lg-2 control-label" for="allDays">
        Days of the week
    </label>
    <div class="col-lg-4">
      <button id="allDays" name="allDays" class="btn btn-green" type="button">
            All Days
        </button>
      <button id="allWkDays" name="allWkDays" class="btn btn-green" type="button">
            Weekdays Only
        </button>
      <button id="allWkEnds" name="allWkEnds" class="btn btn-green" type="button">
            Weekends Only
        </button>
    </div>
  </div>
</div>
<div class="form-horizontal">
  <div class="form-group">
    <div class="col-lg-2"></div>
    <div class="col-lg-4">
      <button id="mon" name="weekdaysbutton" class="btn btn-default" type="button">Mon</button>
      <button id="tue" name="weekdaysbutton" class="btn btn-default" type="button">Tue</button>
      <button id="wed" name="weekdaysbutton" class="btn btn-default" type="button">Wed</button>
      <button id="thur" name="weekdaysbutton" class="btn btn-default" type="button">Thur</button>
      <button id="fri" name="weekdaysbutton" class="btn btn-default" type="button">Fri</button>
      <button id="sat" name="weekenddaysbutton" class="btn btn-default" type="button">Sat</button>
      <button id="sun" name="weekenddaysbutton" class="btn btn-default" type="button">Sun</button>
    </div>
  </div>
</div>