なぜ座席予約フォームは既に選択されている座席をもう一度選べないようにできるのか？　教えてください。

###前提・実現したいこと

私は、webページ上で簡易的な座席予約システムを作成したいと考えています。
作成にあたり、
座席に見立てたボタンの配列の中で、希望の座席（ボタン）を選択し、決定ボタンを押すことで、リンク先のページで選択された座席（ボタン）の名前を確認できるようなプログラムは作成することができました。

1:座席選択ページで希望の座席を選ぶ

↓
2:選択された状態で確認ボタンを押す

↓
3:表示されたウィンドウのOKボタンを押し、リンク先のページで改めて選択された座席の番号を確認する。

そこで、次は選択された座席のデータをもとに、同じ座席を選択できないように（複数の人が重複して座席を選択できないように）したいと考えています。

おそらくサーバー？かどこかに既に選択されている座席のデータを蓄積し、それを参照する必要があるかと思いますが
正直なところ、実現するために必要なモノやプラグラムについて、わかっていない状況です。。。

現在MANPを使用して上記の座席予約システムを作成しています。

###質問内容
ご質問としましては、送信されたデータ（座席ボタンのvalue）をもとに既に選択された座席を重複して選択できない（満席）ようにするために必要なモノ
また、実現するにあたり下記のプログラムに追加、修正すべきプログラムの内容について教えていただけると幸いです。
非常に大雑把で丸投げ気味な質問になってしまいますが、何分わからないことが多く、少しでもお知恵をお貸しいただけると幸いです。
よろしくお願いいたします。

###該当のソースコード
座席選択フォーム

lang
1<html>
2<head>
3<meta charset="utf-8">
4<title>座席選択フォーム</title>
5</head>
6<body>
7<form method="get" action="座席確認フォーム.php" id="f1">
8<input type="checkbox" name="c[]" id="cA-1" value="A-1"><input type="button" value="A-1" class="cx">
9<input type="checkbox" name="c[]" id="cA-2" value="A-2"><input type="button" value="A-2" class="cx">
10<input type="checkbox" name="c[]" id="cA-3" value="A-3"><input type="button" value="A-3" class="cx">
11<input type="checkbox" name="c[]" id="cA-4" value="A-4"><input type="button" value="A-4" class="cx">
12<input type="checkbox" name="c[]" id="cA-5" value="A-5"><input type="button" value="A-5" class="cx"><br>
13<input type="checkbox" name="c[]" id="cB-1" value="B-1"><input type="button" value="B-1" class="cx">
14<input type="checkbox" name="c[]" id="cB-2" value="B-2"><input type="button" value="B-2" class="cx">
15<input type="checkbox" name="c[]" id="cB-3" value="B-3"><input type="button" value="B-3" class="cx">
16<input type="checkbox" name="c[]" id="cB-4" value="B-4"><input type="button" value="B-4" class="cx">
17<input type="checkbox" name="c[]" id="cB-5" value="B-5"><input type="button" value="B-5" class="cx"><br>
18<input type="checkbox" name="c[]" id="cC-1" value="C-1"><input type="button" value="C-1" class="cx">
19<input type="checkbox" name="c[]" id="cC-2" value="C-2"><input type="button" value="C-2" class="cx">
20<input type="checkbox" name="c[]" id="cC-3" value="C-3"><input type="button" value="C-3" class="cx">
21<input type="checkbox" name="c[]" id="cC-4" value="C-4"><input type="button" value="C-4" class="cx">
22<input type="checkbox" name="c[]" id="cC-5" value="C-5"><input type="button" value="C-5" class="cx"><br><br>
23<input type="submit" value="確認"><br>
24</form>	
25</body>
26</html>

lang
1<style>
2[name="c[]"]{display:none;}
3[name="c[]"]:checked + .cx{background-Color:yellow;}
4</style>

lang
1<script type="text/javascript">
2	window.addEventListener('DOMContentLoaded', function(e){
3  document.querySelector('#f1').addEventListener('submit',function(e){
4    var c=[].map.call(document.querySelectorAll('[name="c[]"]:checked'),function(x){
5      return x.value;
6    }).join(",");
7    if(c===""){
8      alert("座席を選択してください。");
9      e.preventDefault();
10    }else{
11      if(!confirm(c+" が選択されています。よろしいですか?")){
12        e.preventDefault();
13      }
14    }
15  });
16  [].forEach.call(document.querySelectorAll('.cx'),function(x){
17    x.addEventListener('click',function(e){
18      var t=e.target;
19      var n=document.querySelector('#c'+t.value);
20      n.checked=!n.checked;
21    });
22  });
23});
24	</script>

座席確認フォーム

lang
1
2<?PHP
3$c=filter_input(INPUT_GET,"c",FILTER_DEFAULT,FILTER_REQUIRE_ARRAY);
4if(!is_null($c)){
5  print "選択された座席:".implode(",",$c)."<br>";
6
7}
8?>

liveasnotes

2018/08/29 15:52

本題とは全く関係ないのですが，WindowsにはSnippingToolというスクショ用のツールがあります．これを使うと任意の範囲だけのスクショを保存することができます．画面全体のスクショだと文字が小さくなり，状況が分かりづらくなるので，範囲をしぼるかブラウザの表示を拡大してスクショすると良いです．ちなみにブラウザの表示拡大は「Ctrl」+「+(;)」，縮小は「Ctrl」+「-(=)」で出来ます．アプリのウィンドウ枠内のスクショだけ欲しい場合は（「Fn」+）「Alt」+「PrtScr」でもできます