Strange behavior when I use addEventListener() on click. It only happens at mobile devices

Question

I'm gonna try to explain what is happening.

When I use a class "hide" as a display: none; to hide a button and show another button after click it works well in desktop browser, but when I tried the same thing at devices like iPhone, Tablets, etc. It has a strange behavior, after the second click, apparently it works ok, but the button don't change, it only changes when I click outside of it. If I don't do that looks like the button do not change. I have to click at the button one time to change them and apparently works, but the button only change when I click again outside it. It happens only in mobile devices.

I don't know what can I do to fix this in devices.

 const buttonForest = document.querySelector(".button-forest"); const buttonForestSelected = document.querySelector(".button-forest-selected"); function forestButton() { buttonForest.classList.remove("hide"); buttonForestSelected.classList.add("hide"); } function forestButtonSelected() { buttonForest.classList.add("hide"); buttonForestSelected.classList.remove("hide"); } buttonForest.addEventListener("click", function() { forestButtonSelected(); }); buttonForestSelected.addEventListener("click", function() { forestButton(); });

 :root { font-size: 62.5%; } main { display: flex; align-self: center; justify-self: center; padding: 5rem; } button { background-color: transparent; border: none; cursor: pointer; position: relative; display: flex; align-items: end; justify-content: center; }.button-container { border: none; position: relative; display: flex; align-items: end; justify-content: center; }.icon-sound:hover.slider { background: white; }.icon-sound:hover.slider::-webkit-slider-thumb { background: white; }.icon-sound:hover.slider::-moz-range-thumb { background: white; }.button-container { border: none; position: relative; display: flex; align-items: end; justify-content: center; }.hide { display: none; }.icon-sound svg path { fill: #e1e1e6; }.icon-sound svg path+path { fill: #323238; }.icon-sound:hover.cor1 { fill: #02799d; }.icon-sound:hover.cor2 { fill: white; } #sounds { display: grid; grid-template-columns: auto auto; gap: 3.2rem; grid-template-areas: "item1 item2" "item3 item4"; }.button-forest-selected.cor1 { fill: #02799d; }.button-forest-selected.cor2 { fill: white; }

 <div class="button-container icon-sound"> <button class="button-forest"> <svg width="138" height="152" viewBox="0 0 138 152" fill="none" xmlns="http://www.w3.org/2000/svg" > <path class="cor1" d="M0 24C0 10.7452 10.7452 0 24 0H114C127.255 0 138 10.7452 138 24V128C138 141.255 127.255 152 114 152H24C10.7452 152 0 141.255 0 128V24Z" fill="#E1E1E6" /> <path class="cor2" d="M51.8355 104V99.8H67.0329V87.2H60.8158C56.9934 87.2 53.7352 85.835 51.0411 83.105C48.347 80.375 47 77.0733 47 73.2C47 70.4 47.7599 67.8217 49.2796 65.465C50.7993 63.1083 52.8487 61.3933 55.4276 60.32C55.8421 56.82 57.3503 53.8917 59.9523 51.535C62.5543 49.1783 65.6053 48 69.1053 48C72.6053 48 75.6562 49.1783 78.2582 51.535C80.8602 53.8917 82.3684 56.82 82.7829 60.32C85.3618 61.3933 87.4112 63.1083 88.9309 65.465C90.4507 67.8217 91.2105 70.4 91.2105 73.2C91.2105 77.0733 89.8635 80.375 87.1694 83.105C84.4753 85.835 81.2171 87.2 77.3947 87.2H71.1776V99.8H87.0658V104H51.8355ZM60.8158 83H77.3947C80.0658 83 82.3454 82.0433 84.2336 80.13C86.1217 78.2167 87.0658 75.9067 87.0658 73.2C87.0658 71.24 86.5132 69.455 85.4079 67.845C84.3026 66.235 82.875 65.0333 81.125 64.24L78.9145 63.26L78.6382 60.81C78.3158 58.3367 77.2566 56.2833 75.4605 54.65C73.6645 53.0167 71.5461 52.2 69.1053 52.2C66.6645 52.2 64.5461 53.0167 62.75 54.65C60.9539 56.2833 59.8947 58.3367 59.5724 60.81L59.2961 63.26L57.0855 64.24C55.3355 65.0333 53.9079 66.235 52.8026 67.845C51.6974 69.455 51.1447 71.24 51.1447 73.2C51.1447 75.9067 52.0888 78.2167 53.977 80.13C55.8651 82.0433 58.1447 83 60.8158 83Z" fill="#323238" /> </svg> </button> <button class="button-forest-selected hide"> <svg width="138" height="152" viewBox="0 0 138 152" fill="none" xmlns="http://www.w3.org/2000/svg" > <path class="cor1" d="M0 24C0 10.7452 10.7452 0 24 0H114C127.255 0 138 10.7452 138 24V128C138 141.255 127.255 152 114 152H24C10.7452 152 0 141.255 0 128V24Z" fill="#E1E1E6" /> <path class="cor2" d="M51.8355 104V99.8H67.0329V87.2H60.8158C56.9934 87.2 53.7352 85.835 51.0411 83.105C48.347 80.375 47 77.0733 47 73.2C47 70.4 47.7599 67.8217 49.2796 65.465C50.7993 63.1083 52.8487 61.3933 55.4276 60.32C55.8421 56.82 57.3503 53.8917 59.9523 51.535C62.5543 49.1783 65.6053 48 69.1053 48C72.6053 48 75.6562 49.1783 78.2582 51.535C80.8602 53.8917 82.3684 56.82 82.7829 60.32C85.3618 61.3933 87.4112 63.1083 88.9309 65.465C90.4507 67.8217 91.2105 70.4 91.2105 73.2C91.2105 77.0733 89.8635 80.375 87.1694 83.105C84.4753 85.835 81.2171 87.2 77.3947 87.2H71.1776V99.8H87.0658V104H51.8355ZM60.8158 83H77.3947C80.0658 83 82.3454 82.0433 84.2336 80.13C86.1217 78.2167 87.0658 75.9067 87.0658 73.2C87.0658 71.24 86.5132 69.455 85.4079 67.845C84.3026 66.235 82.875 65.0333 81.125 64.24L78.9145 63.26L78.6382 60.81C78.3158 58.3367 77.2566 56.2833 75.4605 54.65C73.6645 53.0167 71.5461 52.2 69.1053 52.2C66.6645 52.2 64.5461 53.0167 62.75 54.65C60.9539 56.2833 59.8947 58.3367 59.5724 60.81L59.2961 63.26L57.0855 64.24C55.3355 65.0333 53.9079 66.235 52.8026 67.845C51.6974 69.455 51.1447 71.24 51.1447 73.2C51.1447 75.9067 52.0888 78.2167 53.977 80.13C55.8651 82.0433 58.1447 83 60.8158 83Z" fill="#323238" /> </svg> </button> </div>