data-filtertermで設定した複数の値をinput[search]に反映される様にしたい

実現したいこと

現在、以下の様にボタンに付与した
data-filtertermの値を<input type="search">へ反映させ、
１つの値であれば以下に続くtable内のデータの絞り込み
（単に一致するテキストのみ絞り込みして表示）
出来る様になりました。

発生している問題・分からないこと

この<input type="search">へは
絞り込みテキスト１ 絞り込みテキスト２など、半角スペースを入れれば
複数の値でも動作する事が確認出来ています。

なので、javascriptでクリックしたボタンの値を反映させ、
２つ目以降は半角スペースを加え、選択済みのボタンを再クリックしたら
その値はinput欄から削除される、といった仕様を考えたのですが、
上手く出来ずにおり、お力添えをいただければと思い、
質問させて頂きました。

また、可能であれば選択済みのボタンについては
何かしらのclass名付与をして、cssでデザインを変えたいと思っております。

該当のソースコード

html

1<ul class="shiborikomi_list">2<li><button data-filterterm="絞り込みテキスト１">絞り込みテキスト１</button></li>3<li><button data-filterterm="絞り込みテキスト２">絞り込みテキスト２</button></li>4<li><button data-filterterm="絞り込みテキスト３">絞り込みテキスト３</button></li>5</ul>6 7<input type="search" aria-controls="shiborikomi">8 9<table>10. 11. 12. 13</table>

試したこと・調べたこと

上記の詳細・結果

data-filtertermの値をページ推移する事なく、input欄に表示させる方法がどうしても分かりませんでした。

補足

特になし