'Using the Same jQuery Function in Separate Buttons

I'm trying to get each button to change color on click. However, I want to separate buttons 1-3 from buttons 4-6 so they are independent from each other. I want to be able to click buttons 1-3 and they change color without affecting 4-6 and vice versa. My code is attached. I'm sure this is very simple but my feeble mind can't figure it out :-) Any suggestions?

$(document).ready(function(){
  $("button").click(function() {
    $(".featuredBtn.active").removeClass("active");
    $(this).addClass("active");
  });
});

$(document).ready(function(){
  $("button").click(function() {
    $(".featuredBtn2.active").removeClass("active");
    $(this).addClass("active");
  });
});

.featuredBtn.active,
.featuredBtn2.active {
    background-color: #bf9471;
    color: white;
  }

  .featuredBtn,
  .featuredBtn2 {
    width: 250px;
    height: 50px;
    color: #8c8c8c;
    font-weight: 700;
    background-color: #f4efeb;
    border: none;
    letter-spacing: 2px;
    outline: none;
  }

  .row {
    margin-bottom: 40px;
  }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="test.js"></script>
    <link rel="stylesheet" href="test.css">
</head>
<body>

    <div class="row">
        <div class="col-lg-12 col-xs-12" style="text-align: center;">
          <button type="button" class="featuredBtn active" id="btnOne">BUTTON ONE</button>
          <button type="button" class="featuredBtn" id="btnTwo">BUTTON TWO</button>
          <button type="button" class="featuredBtn" id="btnThree">BUTTON THREE</button>
        </div>
    </div>

    <div class="row2">
        <div class="col-lg-12 col-xs-12" style="text-align: center;">
          <button type="button" class="featuredBtn2 active" id="btnFour">BUTTON FOUR</button>
          <button type="button" class="featuredBtn2" id="btnFive">BUTTON FIVE</button>
          <button type="button" class="featuredBtn2" id="btnSix">BUTTON SIX</button>
        </div>
    </div>

</body>
</html>

Solution 1:^[1]

Instead of applying both handlers to all instances of $('button'), specifically target the instances you want. Your current markup separates them by class, so you can use $(".featuredBtn") and $(".featuredBtn2") to identify those elements:

$(document).ready(function(){
  $(".featuredBtn").click(function() {
    $(".featuredBtn.active").removeClass("active");
    $(this).addClass("active");
  });
});

$(document).ready(function(){
  $(".featuredBtn2").click(function() {
    $(".featuredBtn2.active").removeClass("active");
    $(this).addClass("active");
  });
});

.featuredBtn.active,
.featuredBtn2.active {
    background-color: #bf9471;
    color: white;
  }

  .featuredBtn,
  .featuredBtn2 {
    width: 250px;
    height: 50px;
    color: #8c8c8c;
    font-weight: 700;
    background-color: #f4efeb;
    border: none;
    letter-spacing: 2px;
    outline: none;
  }

  .row {
    margin-bottom: 40px;
  }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="test.js"></script>
    <link rel="stylesheet" href="test.css">
</head>
<body>

    <div class="row">
        <div class="col-lg-12 col-xs-12" style="text-align: center;">
          <button type="button" class="featuredBtn active" id="btnOne">BUTTON ONE</button>
          <button type="button" class="featuredBtn" id="btnTwo">BUTTON TWO</button>
          <button type="button" class="featuredBtn" id="btnThree">BUTTON THREE</button>
        </div>
    </div>

    <div class="row2">
        <div class="col-lg-12 col-xs-12" style="text-align: center;">
          <button type="button" class="featuredBtn2 active" id="btnFour">BUTTON FOUR</button>
          <button type="button" class="featuredBtn2" id="btnFive">BUTTON FIVE</button>
          <button type="button" class="featuredBtn2" id="btnSix">BUTTON SIX</button>
        </div>
    </div>

</body>
</html>

Solution 2:^[2]

Simple, just use the classes that you have already supplied in the selector.

Also, note that you only need one ready handler, not two.

$(document).ready(function(){
  $("button.featuredBtn").click(function() {
    $(".featuredBtn.active").removeClass("active");
    $(this).addClass("active");
  });

  $("button.featuredBtn2").click(function() {
    $(".featuredBtn2.active").removeClass("active");
    $(this).addClass("active");
  });
});

.featuredBtn.active,
.featuredBtn2.active {
    background-color: #bf9471;
    color: white;
  }

  .featuredBtn,
  .featuredBtn2 {
    width: 250px;
    height: 50px;
    color: #8c8c8c;
    font-weight: 700;
    background-color: #f4efeb;
    border: none;
    letter-spacing: 2px;
    outline: none;
  }

  .row {
    margin-bottom: 40px;
  }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="test.js"></script>
    <link rel="stylesheet" href="test.css">
</head>
<body>

    <div class="row">
        <div class="col-lg-12 col-xs-12" style="text-align: center;">
          <button type="button" class="featuredBtn active" id="btnOne">BUTTON ONE</button>
          <button type="button" class="featuredBtn" id="btnTwo">BUTTON TWO</button>
          <button type="button" class="featuredBtn" id="btnThree">BUTTON THREE</button>
        </div>
    </div>

    <div class="row2">
        <div class="col-lg-12 col-xs-12" style="text-align: center;">
          <button type="button" class="featuredBtn2 active" id="btnFour">BUTTON FOUR</button>
          <button type="button" class="featuredBtn2" id="btnFive">BUTTON FIVE</button>
          <button type="button" class="featuredBtn2" id="btnSix">BUTTON SIX</button>
        </div>
    </div>

</body>
</html>

Solution 3:^[3]

Your error is that you add both click handlers to every button instead of only adding the appropriate handler to the appropriate buttons. So every time you push a button, you call both handlers consecutively, rather than just the handlers for that button set.

Replacing the first $("button") with $(".featuredBtn") and the second $("button") with $(".featuredBtn2") achieves what you're tying to achieve.

Note that there's no need to call $(document).ready() twice. You can just call it once combine the code for both handlers in that single call. Technically, this is not an error, but your code is cleaner if you just call $(document).ready() here.

Demo

$(document).ready(function(){
  $(".featuredBtn").click(function() {
    $(".featuredBtn.active").removeClass("active");
    $(this).addClass("active");
  });

  $(".featuredBtn2").click(function() {
    $(".featuredBtn2.active").removeClass("active");
    $(this).addClass("active");
  });
});

.featuredBtn.active,
.featuredBtn2.active {
    background-color: #bf9471;
    color: white;
  }

  .featuredBtn,
  .featuredBtn2 {
    width: 250px;
    height: 50px;
    color: #8c8c8c;
    font-weight: 700;
    background-color: #f4efeb;
    border: none;
    letter-spacing: 2px;
    outline: none;
  }

  .row {
    margin-bottom: 40px;
  }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="test.js"></script>
    <link rel="stylesheet" href="test.css">
</head>
<body>

    <div class="row">
        <div class="col-lg-12 col-xs-12" style="text-align: center;">
          <button type="button" class="featuredBtn active" id="btnOne">BUTTON ONE</button>
          <button type="button" class="featuredBtn" id="btnTwo">BUTTON TWO</button>
          <button type="button" class="featuredBtn" id="btnThree">BUTTON THREE</button>
        </div>
    </div>

    <div class="row2">
        <div class="col-lg-12 col-xs-12" style="text-align: center;">
          <button type="button" class="featuredBtn2 active" id="btnFour">BUTTON FOUR</button>
          <button type="button" class="featuredBtn2" id="btnFive">BUTTON FIVE</button>
          <button type="button" class="featuredBtn2" id="btnSix">BUTTON SIX</button>
        </div>
    </div>

</body>
</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	David
Solution 2	Lee Taylor
Solution 3	John Slegers

'Using the Same jQuery Function in Separate Buttons

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Demo

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]