Jquery Select all IDs in different Sections

Stack Overflow Asked by abcid d on December 23, 2020

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

One 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}

<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 class="square"></div>
</div>
<div class="block">
  This is block 2
  <div class="square"></div>
</div>

Answered by MPortman on December 23, 2020

Jquery Select all IDs in different Sections

One Answer

Add your own answers!

Related Questions

Laravel Slow queries

Display image that returns HTTP 503 in Firefox

How to get a directive to react to an EventEmitter in a component

How to create a nested dictionary from existing dictionary with set and list of tuples

How do I draw text at an angle using python’s PIL?

Simple TCP listener on swift

check the type of the only child in react

Cannot update document using the NodeJS MongoDB driver

Can not convert umlauts (Ü Ö Ä ü ö ä è é) to .utf8

elegant way of extracting option value when need it

How to schedule a GitHub Actions nightly build, but run it only when there where recent code changes?

Unable to Deploy Streamlit app on Heroku – missing libgcc_s.so.1

React Custom Hook run process when prop changes

Random selection of a row from a pandas DataFrame with weights

How to delete array item from LocalStorage and Update UI in JavaScript?

Disabling datetimepicker slots that are already booked

How to properly get loading text display based on the like button click via jQuery

Styling react-select with CSS modules works on Sandbox but not on local machine

Sign PDF asynchronous using PDFBox

Get non hidden element with previousElementSibling

Ask a Question