How to make jquey code apply to all objects with id #modals?

Question

css

there is this code:

$( "#modals" ).click(function() {
$( ".main" ).css( "-webkit-filter", "blur(5px)" );
$( ".modalDialog" ).css( "background", "rgba(0,0,0,0.8)" );
$( "html" ).css( "overflow", "hidden" );
$( ".main" ).css( "transition", "0.5s" );
});

But only one object with id modals responds to it.
What should I do?

Answer 1

id is unique and should not be repeated. There is a class for this, it is used in the same way, but it can be repeated, and instead of "#" a dot is written - ".". So the code will look like this:

$( ".modals" ).click(function() {
$( ".main" ).css( "-webkit-filter", "blur(5px)" );
$( ".modalDialog" ).css( "background", "rgba(0,0,0,0.8)" );
$( "html" ).css( "overflow", "hidden" );
$( ".main" ).css( "transition", "0.5s" );
});

Answer 2

id is a unique attribute, it must not be repeated.