JSHint warning about addEventListener "`Functions declared within loops referencing an outer scoped variable may lead to confusing semantics"

Question

I am using function that makes a clicked button bold while making its other sibling buttons normal font weight. The function works correctly but I am getting a warning in JSHint saying Functions declared within loops referencing an outer scoped variable may lead to confusing semantics. (gLength, buttonParent). I tried using let instead of var in the code below but the warning is still there. How can I fix the issue that JSHint shows?

function boldButton(buttonParent) {
  buttonParent = buttonParent.querySelectorAll("BUTTON");
  if (buttonParent) {

    for (var g = 0, gLength = buttonParent.length; g < gLength; g++) {
      // set all buttons as normal font before setting a clicked button as bold font:
      buttonParent[g].addEventListener('click', function() {
        for (var r = 0; r < gLength; r++) {
          buttonParent[r].style.fontWeight = "normal";
        }
        // set the clicked button as bold font:
        this.style.fontWeight = "bold";
      }, false);
    }
  }
}

var buttonWrap = document.getElementById("button-wrap");
boldButton(buttonWrap);

<div id="button-wrap">
  <button>Button 1</button>
  <button>Button 2</button>
  <button>Button 3</button>
</div>