How can I add a css rule to a dynamically created element in jquery

Question

Is it possible to add css to a specific dynamically created div in jquery? I want to add an overlay to a specific div but trying to find a way to pass the id from the dynamically created div to the jquery function in order to only add the CSS rule to that specific div, is becoming a task for me. When I click on the div it adds the overlay to all of them. Thanks for your time and here is my code.

foreach($selectedPhotoResult as $rowSelect){
    if($counter % 3 === 1){
        echo '</div><div class="row">';
    }
        echo'
        <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 text-center picContainer">
            <a class="overlayPicHL" data-overlayPicID-id="'.$row['ad_id'].'"><div class="price" style="position:absolute;top:0px;;right:15px;z-index:98;height:50px;width:50px;border-radius: 0px 5px 0px 0px;background-image: linear-gradient(to bottom, rgba(0,0,0,0.8) 50%, rgba(0,0,0,0) 100%);"><i class="fa fa-eye" style="font-size:25px;color:#ffffff;position:absolute;top:10px;right:10px;"></i></div></a>
                <div class="well photoControlsMain pht-brd-cl">
                    <a class="mainImageProfile" style="display:block;" data-userMain-id="'.$row['ad_user'].'" data-pic-id="'.$row['ad_photo_thumb'].'">
                        <div class="imageOverlayStyle">
                            Something here
                        </div>
                        <figure>                                                        
                           <img src="'.$row['ad_photo_thumb'].'" class="img-responsive imageSizingGallery imageProfileStyleSmall" style="object-fit: contain;" width="100%" alt=""/>

                        <div class="photoControlsMainImage">
                            <p style="z-index:9999;">
                        <span class="text-prt-und-bl usernameIndexPos">'.ucwords($row['industryName']).'</span>
                        <span class="adRateIndexPos">$'.$row['ad_rate'].'/hr</span>
         ';

    if($userfile->member_is_loggedin()){    
        echo'<a class="userMsgID" data-toggle="modal" data-target="#msgUserModal" data-userSenduserID-id="'.$rowSelect['user_id'].'" data-userSend-id="'.$rowSelect['industryName'].'" data-username-modal="'.ucwords($rowSelect['industryName']).'"><span class="commentIcoPos"><i class="fa fa-comment-o"></i></span></a>';
            if($favList->rowCount() > 0){                                           
                foreach($favListResult as $rowFav){
                    if($rowFav['user_fav_id'] == $user_id){
                            echo'<span class="heartIcoPosRed adUnFav" data-unfav-id="'.$rowFav['fav_id'].'"><a><i class="fa fa-heart heartIcoRedColor"></i></a></span></a>';
                            }                                       
                    }   
            }else{
                echo'<span class="heartIcoPos adFav" data-userFav-id="'.$user_id.'" data-fav-id="'.$row['ad_id'].'"><a class="heartIcoWhite"><i class="fa fa-heart"></i></a></span></a>';
            }   
                echo city($row['ad_city']);
        }else{                                          
            echo'</a>
                <a class="loginDisplayHeader" style="display:none;"><span class="commentIcoPos"><i class="fa fa-comment-o"></i></span></a>
                <a class="loginDisplayHeaderFull" id="loginFormShowHeader"><span class="commentIcoPos"><i class="fa fa-comment-o"></i></span></a>
                <a class="loginDisplayHeader" style="display:none;"><span class="heartIcoPos heartIcoWhite"><i class="fa fa-heart"></i></span></a>
                <a class="loginDisplayHeaderFull" id="loginFormShowHeader"><span class="heartIcoPos heartIcoWhite"><i class="fa fa-heart"></i></span></a>
                ';

                echo city($row['ad_city']);
                }

            $likes = $conn->prepare("SELECT count(likes) as likeCount
                FROM 
                    likes
                WHERE
                    user_accept_id = :adUserId                                  
                ");
                $likes->bindParam(":adUserId", $adUserId);
                $likes->execute();
                $likesFetch = $likes->fetchAll();                                       
                if($likes->rowCount() > 0){
                    foreach($likesFetch as $rowLikes){

                        echo'<span class="userLikeBtnLG">'.thousandsCurrencyFormat($rowLikes['likeCount']).' Likes <i class="fa fa fa-thumbs-o-up thbsUPND"></i></span>';

                            }
                        }
                    echo'</p>
            </div>
        </figure>
    </div>
 </div>                                             
 '; 
}

Here is the jquery code so far

   $(".overlayPicHL").on("click", function() {
     const imageOverlayStyle = 
     $(this.nextElementSibling).find('.imageOverlayStyle');
     $(imageOverlayStyle).css({
     backgroundColor: 'yellow'
     });
   });

And this is the CSS for the overlay item

.imageOverlayStyle {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #008CBA;
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: .5s ease;
}

It's a simple overlay transition, I just need to figure out how to add this overlay to a specific div that is pulled from the database...dynamically created. I have searched for a solution for a while now with no such luck yet.

Answer 1

The .imageOverlayStyle you want to target is a child of the next sibling of the clicked .overlayPicHL , so use nextElementSibling and [0] :

 $(".overlayPicHL").on("click", function() { const imageOverlayStyle = $(this.nextElementSibling).find('.imageOverlayStyle'); $(imageOverlayStyle).css({ backgroundColor: 'yellow' }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 text-center picContainer"> <a class="overlayPicHL" data-overlayPicID-id="'.$row['ad_id'].'">overlayPicHL <div class="price"><i class="fa fa-eye" style="font-size:25px;color:#ffffff;position:absolute;top:10px;right:10px;"></i></div> </a> <div class="well photoControlsMain pht-brd-cl"> <a class="mainImageProfile" style="display:block;" data-userMain-id="'.$row['ad_user'].'" data-pic-id="'.$row['ad_photo_thumb'].'"> <div class="imageOverlayStyle"> Something here </div> <figure> <img src="'.$row['ad_photo_thumb'].'" class="img-responsive imageSizingGallery imageProfileStyleSmall" style="object-fit: contain;" width="100%" alt="" /> <div class="photoControlsMainImage"> <p style="z-index:9999;"> <span class="text-prt-und-bl usernameIndexPos">usernameIndexPos</span> <span class="adRateIndexPos">adrate</span> </p> </div> </figure> </a> </div> </div> <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 text-center picContainer"> <a class="overlayPicHL" data-overlayPicID-id="'.$row['ad_id'].'">overlayPicHL <div class="price"><i class="fa fa-eye" style="font-size:25px;color:#ffffff;position:absolute;top:10px;right:10px;"></i></div> </a> <div class="well photoControlsMain pht-brd-cl"> <a class="mainImageProfile" style="display:block;" data-userMain-id="'.$row['ad_user'].'" data-pic-id="'.$row['ad_photo_thumb'].'"> <div class="imageOverlayStyle"> Something here </div> <figure> <img src="'.$row['ad_photo_thumb'].'" class="img-responsive imageSizingGallery imageProfileStyleSmall" style="object-fit: contain;" width="100%" alt="" /> <div class="photoControlsMainImage"> <p style="z-index:9999;"> <span class="text-prt-und-bl usernameIndexPos">usernameIndexPos</span> <span class="adRateIndexPos">adrate</span> </p> </div> </figure> </a> </div> </div>

Answer 2

Add the rules to a stylesheet so that they are automatically applied to the newly created elements. Chain the css() method when you create your elements: $('') . appendTo(document. ... Create a new stylesheet dynamically: $("").

$('<img id="newImage" src="text.jpg"/>')
.appendTo(document.body)
.css(style);

Create a new stylesheet dynamically:

$("<style>").text("#myNewEl { width:40px; height:35px; }").appendTo("head");

Answer 3

You can find class in entire document and add css , you can use next() if you want it to add to only next( ) div

 $(document).on("click", ".overlayPicHL", function(){ var id = $(this).attr("data-overlayPicID-id"); $(this).next(".imageOverlayStyle").css({"height":"100%"}); //<-this is the css I want to add to the specific div when the icon has been clicked });

 .imageOverlayStyle { position: absolute; bottom: 0; left: 0; right: 0; background-color: #008CBA; overflow: hidden; width: 100%; height: 0; transition: .5s ease; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <a class="overlayPicHL" data-overlayPicID-id="'.$row['ad_id'].'"> <div class="price" style="position:absolute;top:0px;;right:15px;z-index:98;height:50px;width:50px;border-radius: 0px 5px 0px 0px;background-image: linear-gradient(to bottom, rgba(0,0,0,0.8) 50%, rgba(0,0,0,0) 100%);"><i class="fa fa-eye" style="font-size:25px;color:#ffffff;position:absolute;top:10px;right:10px;"></i></div></a> <div class="imageOverlayStyle" id="imgOvrlayID" data-imgOvly-id="'.$row['ad_id'].'"> Something here </div>