Style is being added to the last child among a set of elements, instead of the last child of the selected element

Question

var NavLinks = document.querySelectorAll('.nav-link');
var circuses = document.querySelectorAll('.circle');


for (var i = 0; i < NavLinks.length; i++) {
    var navLink = NavLinks[i];
    navLink.addEventListener('click', function () {      
        for (var i = 0; i < circuses.length; i++) {
           var circle = circuses[i];
           circle.style.display='none';
        }
        var theLastChild = navLink.lastChild;
        theLastChild.style.display='block';   
      
    }
    );  
  }

.nav-container{   
    height: 10px;
    background: white;
    padding: 30px 0px 40px 0px;  
    margin-left: 18%;
    margin-right: 18%;     
}
.nav-body  ul{
    text-align: right;
}
.nav-body  ul li{
    display: inline- block;
    float: left;
    margin-right: 30px;    
}
#logo{
    margin-right: 0px;
}
.nav-body ul li{
    line-height: 0.6;
}
#logo{    
    margin-top: -10px;
} 
#logo-light-blue{
    color: #5dc5ef;
    font-weight: 900;
}
#logo-dark-blue{
    color: #1885c8;
    font-weight: 900;
}
.circle {
    display: none;
	width: 8px;
	height: 8px;
	background: #5dc5ef;
	/* -moz-border-radius: 50px;
	-webkit-border-radius: 50px; */
    border-radius: 4px;
    margin: auto;
    margin-top: 7px;
}

<header class="nav-container">
        <nav class="nav-body">
            <ul>
                <li class="nav-link"><a  href="#">צור קשר</a>
                <div class="circle"></div></li>
                <li class="nav-link"><a href="#">המלצות ומאמרים</a>
                    <div class="circle"></div></li>
                <li class="nav-link"><a href="#">שאלות נפוצות</a>
                    <div class="circle"></div></li>
                <li class="nav-link"><a href="#">אודות ד"ר שי מרון אלדר</a>
                    <div class="circle"></div></li>
                <li class="nav-link"><a href="#">אודות ההליכים</a>
                    <div class="circle"></div></li>
                <li class="nav-link"><a href="#">ראשי</a>
                    <div class="circle"></div></li>
                <li id="logo"> <h3> <span id="logo-light-blue">  ד"ר </span><span id="logo-dark-blue"> שי מרון  אלדר  </span></h3><br>   
                        <h6> פתרונות כירורגיים להשמנת יתר וניתוחים זעיר פולשניים</h6></li>
            </ul>
        </nav>
    </header>

I need to make a blue circle under that category menu, which I pressed. But now blue circle added only to last menu category. Doesn't matter which one was pressed. I looking for the last child of that menu category which was pressed. But it shows me every time last child of all menu categories. What is wrong?

>

Answer 1

The first big problem I see is you have nested for loops but are using the same iterator variable of i. If you are going to next the loops, you need the inner loop to have a different variable. In situations like this, I will often use ii just because it's easy.

Furthermore, you seem to be doing this in a roundabout way. I'm not entirely sure what you need, but if it is as it appears, then this solution is simpler.

CSS

.circle {
    display: none;
    ... other attributes
}

.active-menu-item > .circle {
    display: block;
}

JavaScript

var NavLinks = document.querySelectorAll('.nav-link');

for (var i = 0; i < NavLinks.length; i++) {
    var navLink = NavLinks[i];
    navLink.addEventListener('click', function () {      
        for (var ii = 0; ii < NavLinks.length; ii++) {
           NavLinks[ii].classList.remove("active-menu-item");
        }
        navLink.classList.add("active-menu-item");
    });  
}

Answer 2

You have errors in HTML. Span tags need to be closed.

            <li id="logo"> 
              <h3> 
                <span id="logo-light-blue">  ד"ר </span>
                <span id="logo-dark-blue"> שי מרון  אלדר  </span>
              </h3>
              <br>   
              <h6> פתרונות כירורגיים להשמנת יתר וניתוחים זעיר פולשניים</h6>
             </li>

And Id attributes should be unique to the element, you are repeating the circle as an Id all over the place.

<div id="circle"></div></li>

It this doesn't solve it, try explaining the question better since even in the demo you have put result is all over the place. Are we missing some CSS or a style lib?

EDIT: I think I know what you wanna, is it this? Have a look at fiddle: fiddle here

Do you need circle removed from other elements once you click your element?

If you need the circle to be only on 1 element, it needs to be removed from others. Here is a fiddle showing that: fiddle with only 1 circle

Difference is in:

var NavLinks = document.querySelectorAll('.nav-link');

for (var i = 0; i < NavLinks.length; i++) {
    var navLink = NavLinks[i];
    navLink.addEventListener('click', function (event) {
            var allNavs = document.querySelectorAll('.nav-link div');
        for (var it = 0; it < allNavs.length; it++){
            console.log(allNavs[it]);
          allNavs[it].classList.add('invisible');
          allNavs[it].classList.remove('circleVisible');
         }
        console.log(allNavs);
            var targetElement = event.target || event.srcElement;
        var circleDiv = targetElement.parentNode.querySelectorAll('div');
        console.log(circleDiv[0]);
        circleDiv[0].classList.add('circleVisible');
        circleDiv[0].classList.remove('invisible');
        console.log(circleDiv[0]);
    }
    );  
  }

I have left console.logs, so you see how it works, remove them when running the code for real :)