jQuery выбирает ненужные элементы в объектах того же класса

полный новичок здесь. Таким образом, у меня есть два экземпляра этого объекта в моем документе HTML.

<div class="newsItem cf sb br">
            <div class="closeButton right"></div>
            <div class="titles left">
                <div class="Title"><h3>{{Title}}</h3></div>
                <div class="Subtitle"><h5>{{Subtitle}}</h5></div>
            </div>
            <br>
            <div class="imageContainer"><img src={{URI}} alt="" /></div>
            <div class="newsText"><p>{{Text}}</p></div>
            <div class="interactive">
                <div class="comment left sb br">Komentiraj</div>
                <ul class="right stcom">
                    <li><button class="star"><img src="images/icons/star.png" alt=""></button></li>
                    <li><button class="star"><img src="images/icons/star.png" alt=""></button></li>
                    <li><button class="star"><img src="images/icons/star.png" alt=""></button></li>
                    <li><button class="star"><img src="images/icons/star.png" alt=""></button></li>
                    <li><button class="star"><img src="images/icons/star.png" alt=""></button></li>
                    <li>0</li>
                    <li><img src="images/icons/speech.png" alt="bubble"/></li>
                </ul>
            </div>  
        </div>

Элементы в списке, которые имеют звезд класса, должны имитировать систему оценки звезд. Мне нужно сделать функцию jQuery, которая загорается звездой, которая нажата и все предыдущие звезды. Мои объекты определяются только классом newsItem, без id. Мой друг сделал это со следующим кодом, но он использовал идентификатор для своих объектов и должен был скопировать код для каждого объекта с другим идентификатором:

$("#slider").on("click", "#box1 .ButtonMore", function()
{
    var stars = $("#mainContainer #slider #box1 .star .cl .stars .ButtonMore");
    var x= stars.index($(this));

    for (var n = 0; n < stars.length; n++)
        $(stars[n]).removeClass("active");

    for (var n = 0; n <= x ; n++)
        $(stars[n]).addClass("active");
});

Я попытался изменить этот код для использования только с классом, но не повезло. Мое изменение:

    $("#itemContainer").on("click", ".newsItem .star", function()
{
    var s = $("#itemContainer .newsItem .star");
    var x= s.index($(this));

    for (var n = 0; n < s.length; n++)
        $(s[n]).removeClass("active");

    for (n = 0; n <= x ; n++)
        $(s[n]).addClass("active");
});

Когда я запустил это, чтобы зажечь звезды, щелчок во втором объекте зажег бы все звезды в первом объекте, как будто все они были под одним и тем же списком. Я предполагаю, что, потому что я использую только классы, а не идентификаторы. Есть ли способ сделать это без id, потому что я не хочу загромождать мой.js файл, и это знание действительно пригодится в будущем. Это школьная работа, поэтому мне нужно сделать это так.