2 header with searchbar in middle to hide

I want help!:
I have two similar header containers that I want to be scrollable with a little change.
With your help, we placed a search icon in the main header a few days ago, and by clicking on it, the search bar appeared.
Now there is this bar and that button in both headers. But only one button shows the search bar, I want the search bar button to appear when the headers are replaced by scrolling.
There are two HTML widgets in each header, and I will send you the HTML codes of each header and the JavaScript and CSS code.
I will also send ID. Of course, you can find it yourself.

Please tell me which code should be modified that by clicking on both buttons in two headers, only one search bar will be hidden and displayed from one header.
I want to show and hide each search bar button for the same header.