Jquery Select all IDs in different Sections

Question

I have 2 same IDs inside 2 different sections. When the button is clicked, I want it selects the id inside this section and apply a style, then it will select the id in a different section and apply that style, as well.

My sample below just works inside the first section. Please give a hand.

$( document ).ready(function() {
    $('#clickMe').click(function() {
      $('#square').css('background-color', 'red');
    })
});

.block {width: 100%; padding-bottom: 40px;}
#square {width: 80px; height: 30px; border: 1px solid gray}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="block">
  This is block 1
  <button id="clickMe">Click Me</button>
  <div id="square"></div>
</div>
<div class="block">
  This is block 2
  <div id="square"></div>
</div>

css html jquery

This is block 1

This is block 2

MPortman · Answer

The same ID should only be once per page. If you have multiple the DOM only attaches the attributes to the first ID thats found with that name. $( document ).ready(function() { $('#clickMe').click(function() { $('.square').css('background-color', 'red'); }) }); .block {width: 100%; padding-bottom: 40px;} .square {width: 80px; height: 30px; border: 1px solid gray}

This is block 1

This is block 2

Jquery Select all IDs in different Sections

One Answer

Add your own answers!

Ask a Question