ボタンを押すと検索条件を追加したり削除できるようにしたい

前提・実現したいこと

参考ページ
https://www.toshiba-lifestyle.co.jp/living/refrigerators/select.html?_ga=2.81298835.546470534.1602520310-1248578822.1602520310

東芝さんのページをお借りしました。
こちらのページではデータベースから呼び出しはしていませんが、
形式は同じようにユーザーが検索条件を選んで、データベースから呼び出す。というものを作りたいと思っています。

JavaScriptで検索条件のオンオフボタンは作ったものの、表示だけの処理で呼び出しのSQL文の書き方が分からない状態です。
出来れば検索ボタンを設けずにユーザーが検索条件を追加すると同時に検索件数は表示出来る様にしたいです。

ここに質問の内容を詳しく書いてください。
・検索条件ボタンを押したらSQL文に条件追加、ボタン2度押しで削除のプログラム
・検索ボタンなしでもヒット件数の表示（可能ならそのままデータ呼び出し）

該当のソースコード

php
1
2<!----capa---->
3    <div class="blockcapa">
4        <hr>
5        <div class="selectArea">
6            <img src="選択画面/容量で選ぶ.png">
7        <ul>
8            <li id="select0">
9                <span>300L以下</span>
10            </li>
11            <li id="select1">
12                <span>301L〜400L</span>
13            </li>
14            <li id="select2">
15                <span>401L〜500L</span>
16            </li>
17            <li id="select3">
18                <span>501L〜600L</span>
19            </li>
20            <li id="select4">
21                <span>601L以上</span>
22            </li>
23        </ul>
24        </div>
25
26        <script>
27            document.getElementById("select0").onclick = function() {
28                this.classList.toggle("green");
29            };
30            document.getElementById("select1").onclick = function() {
31                this.classList.toggle("green");
32            };
33            document.getElementById("select2").onclick = function() {
34                this.classList.toggle("green");
35            };
36            document.getElementById("select3").onclick = function() {
37                this.classList.toggle("green");
38            };
39            document.getElementById("select4").onclick = function() {
40                this.classList.toggle("green");
41            };
42        </script>
43
44
45
46


/************
****capa*****
************/

.blockcapa {
    position: absolute;
    margin-top: 220px;
    margin-left: 10%;
    width: 80%;
}

.selectArea ul {
    overflow: hidden;
    margin-left: 20%;
    list-style: none;   /*--listマーク（・）を消す--*/
}
.selectArea li {
    border: 1px solid #ccc;
    border-radius: 8px;
    height: 90px;
    width: 25%;
    box-sizing: border-box;
    margin-top: 2%;
    margin-left: 4%;
    background: rgb(246,246,246);
    background: -webkit-linear-gradient(top,  rgba(246,246,246,1) 0%,rgba(248,248,248,1) 50%,rgba(248,248,248,1) 100%);
    background: linear-gradient(to bottom,  rgba(246,246,246,1) 0%,rgba(248,248,248,1) 50%,rgba(248,248,248,1) 100%);
    cursor: pointer;
    float: left;
    float: clear;
}

.selectArea ul li {     /*--文字系--*/
    text-align: center;
    font-size: 20px;
    line-height: 90px;
}

.selectArea img {
    position: absolute;
    margin-top: 7%;
    margin-left: 1%;
}

.selectArea li:hover {
    background: #eaede6;
}

#select0.green {
    background: #21759b;
}

#select1.green {
    background: #21759b;
}

#select2.green {
    background: #21759b;
}

#select3.green {
    background: #21759b;
}

#select4.green {
    background: #21759b;
}