I want to add single image multiple times as per count received from User-CodePudding

I want to add single image multiple times, the count I will get from user. I want to add this image in particular class which will be in slick-slider cards.

I have tried JavaScript where I show image by for loop, but it get visible in only one card all cards have different amount of images

HTML:

<div >
                <div >
                    <div >
                        <div ></div>
                        <div >
                            <p >Lorem ipsum dolor sit amet consectetur. Augue orci sem nisi arcu sed faucibus fermentum. Ipsum sed morbi dapibus libero id massa fermentum id lorem justo.</p>
                            <p >Ajit Babaleshwar</p>
                        </div>       
                    </div>
                </div>
                <div >
                    <div >
                        <div ></div>
                        <div >
                            <p >Lorem ipsum dolor sit amet consectetur. Eu egestas non etiam netus velit vitae non tortor at. Viverra tempus nunc eget aliquam. Cursus sit elementum bibendum in duis amet in. Pulvinar turpis purus nunc nunc tellus. Suscipit pellentesque neque faucibus urna cursus.</p>
                            <p >Nahia Colunga</p>
                        </div>       
                    </div>
                </div>
                <div >
                    <div >
                        <div ></div>
                        <div >
                            <p >Lorem ipsum dolor sit amet consectetur. Eget dictumst est neque suspendisse arcu ullamcorper. Nascetur faucibus faucibus habitant auctor. Dui tortor nullam aliquam et. Amet et consectetur gravida sed ullamcorper dui odio. Sit natoque fusce egestas amet etiam cras.</p>
                            <p >Ajit Babaleshwar</p>
                        </div>       
                    </div>
                </div>
                <div >
                    <div >
                        <div ></div>
                        <div >
                            <p >Lorem ipsum dolor sit amet consectetur. Augue orci sem nisi arcu sed faucibus fermentum. Ipsum sed morbi dapibus libero id massa fermentum id lorem justo.</p>
                            <p >Ajit Babaleshwar</p>
                        </div>       
                    </div>
                </div>
            </div>

   var numberOfRating = 5;
    var theLeftSide = document.querySelectorAll(".ratingStar");
    ratingsRow()
    function ratingsRow() {
      for(i = 0; i < numberOfRating; i  ) {
        var stars = document.createElement("img");
        stars.src = "assets/images/rating.png";
        theLeftSide[0].appendChild(stars);
     }

   }

CodePudding user response：

This code may work if I understood what you wanted.
With as specified by @CBroe two loops, one to go through each DIV of class "ratingStar" and one to insert the images

var numberOfRating = 5;

// For each Element with class "ratingStar"
$('.ratingStar').each(function(index){
    

    // For each Rating
    for(i=0;i<numberOfRating;i  )
    {
        // Create Image
        var stars = document.createElement("img");
        stars.src = "rating.png";

        // Append Image
        $(this).append(stars);
    }
    // End - For each Rating

});
// End - each Element with class "ratingStar"