Change the style of an element with css whose style has already been modified with javascript

I have a “filter bar” that is displayed when the screen has a certain width, and it disappears when the screen is to narrow. I have implemented this in my code by using media queries and it works.

When the screen is narrow, a button shows up, to display the hidden bar. I have implemented this code in javascript, and when I click on it, the bar is displayed/hidden : it works.

Now, my problem is : when I display the hidden bar with the button (so the window is narrow), and I increase the size of the window until reaching a width for which the bar have to shows up, it doesn’t. It seems like the javascript imposes the style of the bar, so that the media queries don’t work. How to manage this ?

My code with the important elements is shown below :

function displayHideFiltrerPar() {

    let tmp = document.getElementById('container-left-small-screen');

    if (tmp.style.display == "none" || tmp.style.display == "") {
        tmp.style.display = "inline-block";
    } else {
        tmp.style.display = "none";
    }

}

@media (min-width: 576px) and (max-width: 767px) {
  
 .res-button-filtrer-par {
    display: flex;
    margin-bottom: 2em;
  }

  #container-left-small-screen {
    display: none;
    position: absolute;
    width: 50%;
    top: -130px;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  /* Size M  */
 .res-button-filtrer-par {
    display: none;
  }

  #container-left-small-screen {
    display: inline-block;
  }
}

<button class="res-button-filtrer-par res-button" type="button" onClick="displayHideFiltrerPar();">
    <span>Display filter bar</span>
</button>

<div id="container-left-small-screen">
    Filter bar
</div>