jQuery - Target Elements by id Using jQuery - QhfSTg00IywxiI9_Y14SS

Tell us what’s happening:
Describe your issue in detail here.

I want to try the escape selector method to use # in my id. I am trying to hide my #target1 button here. It is not working when trying to use the escapeSelector method to bypass #. When // is used, it works just fine. Can someone tell me how to do this with the escape selector method.

  **Your code so far**
<script>
$(document).ready(function() {
  $("button").addClass("animated bounce");
  $(".well").addClass("animated shake");

> **$($.escapeSelector("#target1")).addClass("hide");**

});
</script>

<!-- Only change code above this line -->

<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>
  **Your browser information:**

User Agent is: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:102.0) Gecko/20100101 Firefox/102.0

Challenge: jQuery - Target Elements by id Using jQuery

Link to the challenge:

If you didn’t have the # at the beginning of the id, if it was just id="target1", then how would you use jQuery to add the hide class to the button? Show me the jquery Code.

this was the original code

<script>
  $(document).ready(function() {
$("#target1").addClass("hide");
    $("button").addClass("animated bounce");
    $(".well").addClass("animated shake");

  });
</script>

<!-- Only change code above this line -->

<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>type or paste code here

You have to add back the symbol for the selector.

<button id="#target">Click</button>
$("#" + $.escapeSelector("#target")).click(() => {
  console.log("clicked");
});

https://api.jquery.com/jQuery.escapeSelector/

Plain JS

document
  .querySelector("#" + CSS.escape("#target"))
  .addEventListener("click", () => {
    console.log("clicked");
  });