IF statement running but not doing what's inside

I have a form that if you check one box, it send a boolean 'true' to the database, and then Im receiving the response and this is what I wanna work with.

THE FORM

$('#promotion-container footer').before(`
   <span class="buttonRedemp">
      <button class="redddButt load-button2" data="Reedem Card">Reedem Card</button>
   </span>

    `)

MY LOGIC WHEN RECEIVING THE INFORMATION

    if (buttonRedemption == true){
        console.log('Im true', eventName, buttonRedemption, typeof buttonRedemption)
        $('.redddButt').css('display', 'inline')
    }

    if(buttonRedemption == false || buttonRedemption == 'null' || buttonRedemption == null){
      console.log('IM SUPER FALSE', eventName, buttonRedemption, typeof buttonRedemption)
      $('.redddButt').css('display', 'none')
    }

the result is every card even if they are null or false or true are getting the button, but the weird thing is in the console I can see the correct information

Is this a normal behavior, how can I only make the button appear on the 3 cards that are true?