検索バーを中央に配置した2つのヘッダーを非表示にする

助けてください!:
少し変更を加えて、2つの似たようなヘッダーコンテナをスクロール可能にしたいです。
数日前にメインヘッダーに検索アイコンを配置し、それをクリックすると検索バーが表示されるようにしました。
現在、このバーとボタンが両方のヘッダーにありますが、検索バーが表示されるのは1つのボタンだけです。ヘッダーをスクロールで置き換えたときに、検索バーボタンが表示されるようにしたいです。
各ヘッダーには2つのHTMLウィジェットがあり、各ヘッダーのHTMLコードとJavaScriptおよびCSSコードをお送りします。
IDもお送りしますが、ご自身で見つけることも可能です。

両方のヘッダーのボタンをクリックしたときに、1つの検索バーだけが非表示になり表示されるように、どのコードを変更すべきか教えてください。
各検索バーボタンは、同じヘッダーに対して表示・非表示を切り替えたいです。