# freeCodeCamp Challenge Guide: Target the Same Element with Multiple jQuery Selectors

**URL:** <https://forum.freecodecamp.org/t/freecodecamp-challenge-guide-target-the-same-element-with-multiple-jquery-selectors/18322>\
**Category:** freeCodeCamp Contributors\
**Tags:** guide\
**Created:** [July 7, 2016, 10:57pm UTC](https://forum.freecodecamp.org/t/freecodecamp-challenge-guide-target-the-same-element-with-multiple-jquery-selectors/18322 "2016-07-07T22:57:53Z")\
**Posts on this page:** 19\
**Page:** 1

<div class="post-metadata">

**Author:** ![camperbot](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/camperbot/32/18364_2.png) [@camperbot](https://forum.freecodecamp.org/u/camperbot)\
**Post date:** [July 7, 2016, 10:57pm UTC](https://forum.freecodecamp.org/t/freecodecamp-challenge-guide-target-the-same-element-with-multiple-jquery-selectors/18322/1 "2016-07-07T22:57:53Z")

</div>

# [Target the Same Element with Multiple jQuery Selectors](https://www.freecodecamp.org/learn/front-end-libraries/jquery/target-the-same-element-with-multiple-jquery-selectors)

* * *

## Solutions

> **Solution 1 (Click to Show/Hide)**
>
> ```html
> <script>
> $(document).ready(function() {
> $("button").addClass("animated");
> $(".btn").addClass("shake");
> $("#target1").addClass("btn-primary");
> });
> </script>
> 
> <div class="container-fluid">
> <h3 class="text-primary text-center">jQuery Playground</h3>
> <div class="row">
> <div class="col-xs-6">
> <h4>#left-well</h4>
> <div class="well" id="left-well">
> <button class="btn btn-default target" id="target1">#target1</button>
> <button class="btn btn-default target" id="target2">#target2</button>
> <button class="btn btn-default target" id="target3">#target3</button>
> </div>
> </div>
> <div class="col-xs-6">
> <h4>#right-well</h4>
> <div class="well" id="right-well">
> <button class="btn btn-default target" id="target4">#target4</button>
> <button class="btn btn-default target" id="target5">#target5</button>
> <button class="btn btn-default target" id="target6">#target6</button>
> </div>
> </div>
> </div>
> </div>
> 
> ```

---

<div class="post-metadata">

**Author:** ![devtechk](https://avatars.discourse-cdn.com/v4/letter/d/47e85d/32.png) [@devtechk](https://forum.freecodecamp.org/u/devtechk)\
**Post date:** [November 21, 2016, 11:48pm UTC](https://forum.freecodecamp.org/t/freecodecamp-challenge-guide-target-the-same-element-with-multiple-jquery-selectors/18322/2 "2016-11-21T23:48:02Z")

</div>

i ran also this code but it doesn’t work for me… how can be possible?

---

<div class="post-metadata">

**Author:** ![MDR1](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/mdr1/32/49387_2.png) [@MDR1](https://forum.freecodecamp.org/u/MDR1)\
**Post date:** [April 28, 2017, 2:48pm UTC](https://forum.freecodecamp.org/t/freecodecamp-challenge-guide-target-the-same-element-with-multiple-jquery-selectors/18322/3 "2017-04-28T14:48:40Z")

</div>

@devtechk I ran into this issue as well. I could not get one of the test cases “Your #target1 element should have the classes animated‚ shake and btn-primary” to complete. After asking for assistance in /HELP it was suggested to run the code in a different browser. I was able to complete all of the test cases using FireFox instead of Chrome.

---

<div class="post-metadata">

**Author:** ![Ivan64](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ivan64/32/55637_2.png) [@Ivan64](https://forum.freecodecamp.org/u/Ivan64)\
**Post date:** [June 2, 2017, 6:23am UTC](https://forum.freecodecamp.org/t/freecodecamp-challenge-guide-target-the-same-element-with-multiple-jquery-selectors/18322/4 "2017-06-02T06:23:50Z")

</div>

Is there a bug in this page? I can’t get this exercise to pass.

---

<div class="post-metadata">

**Author:** ![Padmakumar](https://avatars.discourse-cdn.com/v4/letter/p/7993a0/32.png) [@Padmakumar](https://forum.freecodecamp.org/u/Padmakumar)\
**Post date:** [June 3, 2017, 3:41am UTC](https://forum.freecodecamp.org/t/freecodecamp-challenge-guide-target-the-same-element-with-multiple-jquery-selectors/18322/5 "2017-06-03T03:41:45Z")

</div>

I find difficulty in understanding the concept… though the given code was the one I used and completed the challenge, but i cant get the concept right… it says

> Note  
> You should only be targeting one element and adding only one class at a time. Altogether, your three individual selectors will end up adding the three classes shake, animated, and btn-primary **to #target1**.

But its actually being applied to all buttons,not just to the button with id #target1, or is it supposed to work that way… or am I not understanding it correctly… Im still not completely clear about this challenge…  
If it is to make us understand the inheritance pattern then that’s not working here… and it could be a bug

Im on Firefox by the way and always prefer it over chrome…

---

<div class="post-metadata">

**Author:** ![nwizeee](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/nwizeee/32/161844_2.png) [@nwizeee](https://forum.freecodecamp.org/u/nwizeee)\
**Post date:** [June 28, 2017, 2:58am UTC](https://forum.freecodecamp.org/t/freecodecamp-challenge-guide-target-the-same-element-with-multiple-jquery-selectors/18322/6 "2017-06-28T02:58:04Z")

</div>

The #target1 belongs to class button and class btn. So it inherited the jQuery class function animated and shake.

---

<div class="post-metadata">

**Author:** ![jkouadio](https://avatars.discourse-cdn.com/v4/letter/j/57b2e6/32.png) [@jkouadio](https://forum.freecodecamp.org/u/jkouadio)\
**Post date:** [June 29, 2017, 10:10am UTC](https://forum.freecodecamp.org/t/freecodecamp-challenge-guide-target-the-same-element-with-multiple-jquery-selectors/18322/7 "2017-06-29T10:10:56Z")

</div>

Hi All,  
for those who think they have the same code but it’s not working, please check if you wrote : “addClass” or “addclass”.  
JavaScript is case sensitive.

---

<div class="post-metadata">

**Author:** ![Avaloncat](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/avaloncat/32/59266_2.png) [@Avaloncat](https://forum.freecodecamp.org/u/Avaloncat)\
**Post date:** [June 29, 2017, 5:41pm UTC](https://forum.freecodecamp.org/t/freecodecamp-challenge-guide-target-the-same-element-with-multiple-jquery-selectors/18322/8 "2017-06-29T17:41:23Z")

</div>

Camperbot has helped me again!!!😁

---

<div class="post-metadata">

**Author:** ![Avaloncat](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/avaloncat/32/59266_2.png) [@Avaloncat](https://forum.freecodecamp.org/u/Avaloncat)\
**Post date:** [June 29, 2017, 5:42pm UTC](https://forum.freecodecamp.org/t/freecodecamp-challenge-guide-target-the-same-element-with-multiple-jquery-selectors/18322/9 "2017-06-29T17:42:56Z")

</div>

These guides are very, very helpful!! 🎉

---

<div class="post-metadata">

**Author:** ![kartikll](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/kartikll/32/161812_2.png) [@kartikll](https://forum.freecodecamp.org/u/kartikll)\
**Post date:** [July 2, 2017, 8:44am UTC](https://forum.freecodecamp.org/t/freecodecamp-challenge-guide-target-the-same-element-with-multiple-jquery-selectors/18322/10 "2017-07-02T08:44:07Z")

</div>

If you did’t not understand this code this is for you

```
$("button").addClass("animated");
$(".btn").addClass("shake");
$("#target1").addClass("btn-primary");

```

The main objective of this code is to shake all buttons and target1 button should have extra functionality than others by putting more class in target1 using jquery directly

```
 $("button").addClass("animated");

```

This code target all buttons with “button selector” and give them “animated” class  
from now all button have class called “animated”

```
$(".btn").addClass("shake");

```

This code will put “shake” class in class that alredy have “btn” class  
and shake all buttons

```
    $("#target1").addClass("btn-primary");

```

This code will putt “btn-primary” class in element that have “#target1” id  
so your target1 button looks blue

---

<div class="post-metadata">

**Author:** ![umukoro6](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/umukoro6/32/88284_2.png) [@umukoro6](https://forum.freecodecamp.org/u/umukoro6)\
**Post date:** [July 5, 2017, 11:22am UTC](https://forum.freecodecamp.org/t/freecodecamp-challenge-guide-target-the-same-element-with-multiple-jquery-selectors/18322/11 "2017-07-05T11:22:20Z")

</div>

I had the same problem.  
I typed the exact same code, It wasn’t working so I simply copied and paste from camperbot and voila!!! Worked. Still don’t know why. maybe if i had copied my code and pasted it back, it might have worked…,  
**\_**** \_**

---

<div class="post-metadata">

**Author:** ![AliRemaity](https://avatars.discourse-cdn.com/v4/letter/a/7c8e57/32.png) [@AliRemaity](https://forum.freecodecamp.org/u/AliRemaity)\
**Post date:** [July 6, 2017, 4:52pm UTC](https://forum.freecodecamp.org/t/freecodecamp-challenge-guide-target-the-same-element-with-multiple-jquery-selectors/18322/12 "2017-07-06T16:52:16Z")

</div>

the code that should we write in this challenge is :  
$(“button”).addClass(“animated”);  
$(“.btn”).addClass(“shake”);  
$(“#target1”).addClass(“btn-primary”);  
first 😊put the code then wait util the iphone screen reload finally press **RUN TEST(ctrl+enter)**

> [@camperbot](#):
>
> The multiple jQuery selectors are:
> 
> 1. By type: `$("button")`
> 2. By class: `$(".btn")`
> 3. By id: `$("#target1")`
> 
> ```html
> <script>
> $(document).ready(function() {
> $("button").addClass("animated");
> $(".btn").addClass("shake");
> $("#target1").addClass("btn-primary");
> });
> </script>
> 
> ```

---

<div class="post-metadata">

**Author:** ![Domo326](https://avatars.discourse-cdn.com/v4/letter/d/ea5d25/32.png) [@Domo326](https://forum.freecodecamp.org/u/Domo326)\
**Post date:** [July 7, 2017, 11:21pm UTC](https://forum.freecodecamp.org/t/freecodecamp-challenge-guide-target-the-same-element-with-multiple-jquery-selectors/18322/13 "2017-07-07T23:21:31Z")

</div>

this was my problem. simple as that. Crazy. lol Thanks

---

<div class="post-metadata">

**Author:** ![karyttab](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/karyttab/32/59773_2.png) [@karyttab](https://forum.freecodecamp.org/u/karyttab)\
**Post date:** [July 8, 2017, 2:09am UTC](https://forum.freecodecamp.org/t/freecodecamp-challenge-guide-target-the-same-element-with-multiple-jquery-selectors/18322/14 "2017-07-08T02:09:52Z")

</div>

I had the exact same code as the one posted in here. So I followed your advice and just copy and paste and it worked!😃 Thank you

---

<div class="post-metadata">

**Author:** ![IamGonnaFindYou](https://avatars.discourse-cdn.com/v4/letter/i/a5b964/32.png) [@IamGonnaFindYou](https://forum.freecodecamp.org/u/IamGonnaFindYou)\
**Post date:** [July 11, 2017, 4:21pm UTC](https://forum.freecodecamp.org/t/freecodecamp-challenge-guide-target-the-same-element-with-multiple-jquery-selectors/18322/15 "2017-07-11T16:21:42Z")

</div>

Had the same problem as people before me. I wrote exactly what camperbot wrote.

When I copied the full element and everything in it, it worked.

My only guess is that you must NOT have any free lines in the script element. This is the only difference I had.

```
<script>
  $(document).ready(function() {
    $("button").addClass("animated");
    $(".btn").addClass("shake");
    $("#target1").addClass("btn-primary");

  });
</script>

```

vs

```
<script>
  $(document).ready(function() {
    $("button").addClass("animated");
    $(".btn").addClass("shake");
    $("#target1").addClass("btn-primary");
  });
</script>
```

---

<div class="post-metadata">

**Author:** ![NexusDivine](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/nexusdivine/32/161714_2.png) [@NexusDivine](https://forum.freecodecamp.org/u/NexusDivine)\
**Post date:** [July 15, 2017, 7:00am UTC](https://forum.freecodecamp.org/t/freecodecamp-challenge-guide-target-the-same-element-with-multiple-jquery-selectors/18322/17 "2017-07-15T07:00:18Z")

</div>

This was the problem I had. Two of the three were addClass, but the third one I had typed addclass.

Guys! Don’t copy/paste! Figure out your problem, and fix it!

---

<div class="post-metadata">

**Author:** ![Rickesh2010](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/rickesh2010/32/61420_2.png) [@Rickesh2010](https://forum.freecodecamp.org/u/Rickesh2010)\
**Post date:** [July 25, 2017, 2:17am UTC](https://forum.freecodecamp.org/t/freecodecamp-challenge-guide-target-the-same-element-with-multiple-jquery-selectors/18322/19 "2017-07-25T02:17:36Z")

</div>

…$(document).ready(function() {  
$(“button”).addClass(“animated bounce”);  
$(".well").addClass(“animated shake”);  
$("#target3").addClass(“animated fadeOut”);  
$(“button”).removeClass(“btn-default”);…  
This is what the code should look like. People seem to be misunderstanding the #target1 is the example and for this lesson button should be in place as in my code above.

Hope that helps

---

<div class="post-metadata">

**Author:** ![camperbot](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/camperbot/32/18364_2.png) [@camperbot](https://forum.freecodecamp.org/u/camperbot)\
**Post date:** [August 10, 2019, 1:18am UTC](https://forum.freecodecamp.org/t/freecodecamp-challenge-guide-target-the-same-element-with-multiple-jquery-selectors/18322/21 "2019-08-10T01:18:33Z")

</div>



---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [January 7, 2025, 12:00pm UTC](https://forum.freecodecamp.org/t/freecodecamp-challenge-guide-target-the-same-element-with-multiple-jquery-selectors/18322/22 "2025-01-07T12:00:03Z")

</div>