Function to leave image in Grayscale

Question

I have a rule where I change the color of Badge according to the "value" of the input, next to this rule I need to put another to change the color of the image to Grayscale (if possible without using css), I even managed to make a rule that does such but I’m not able to put together with the rule of Badges.

$(document).ready(function(){
    $('img').css('filter', 'grayscale(1)');
});
  

<nav class="tiles box-one mx-auto d-table w-50 ">
                <div type="button" class="btn tile col-md-2 badge  position-relative">
                    <img src="./img/logo_meli.jpg">
                    <input class="valBdg" type="hidden" value="100" />
                    <span  class="badge position-absolute badge-notification btn-danger"> 666</span>
                </div>
               
                <div type="button" class="btn tile col-md-2 badge position-relative">
                    <img src="./img/logo_meli.jpg">
                    <input class="valBdg" type="hidden" value="0" />
                    <span  class="badge position-absolute  badge-notification btn-danger"> 0</span>
                    
                </div>

                <div type="button" class="btn tile col-md-2 badge  position-relative" >
                    <img  src="./img/logo_meli.jpg">
                    <input class="valBdg" type="hidden" value="1" />
                    <span  class="badge position-absolute badge-notification btn-danger"> 666</span>
                    
                </div>
</nav>

function setBadges() {
    const badgeValues = document.getElementsByClassName('valBdg');
    
    for (let i = 0; i < badgeValues.length; i++) {
      const badge = badgeValues[i].nextElementSibling;
      const badgeClass = badgeValues[i].value > 0 ? 'btn-danger' : 'btn-primary';

      badge.classList.remove('btn-danger', 'btn-primary');
      badge.classList.add(badgeClass);
    }
}

document.getElementById('setBadgesButton').addEventListener('click', setBadges);