3つ配置したセレクトボックスのうち選択した２つのみ表示させたい

実現したいこと

タイトルの通りですが、セレクトボックスで選択したものを■選ばれた二人■の場所に１つは表示させることができたのですが、残り２つを表示させる方法がわかりません。

実現したいことですが、
・セレクトボックスを3つ配置し、選択したものを２つのみ表示させたい。
・同じセレクトボックスから二つ表示できてしまうので、各セレクトボックスにつき１つまでしか表示できないようにしたい。
以上の２つです。

助言頂けると助かります。。。

該当のソースコード

javascript
1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="utf-8"/>
5  <title></title>
6</head>
7<body>
8
9  <select id="select1" onchange="myouji1()">
10    <option value="">選択なし</option>
11    <option value="本田">本田</option>
12    <option value="城田">城田</option>
13    <option value="中田">中田</option>
14  </select>
15
16  <select id="select2" onchange="myouji2()">
17    <option value="">選択なし</option>
18    <option value="藤原">藤原</option>
19    <option value="藤井">藤井</option>
20    <option value="藤岡">藤岡</option>
21  </select>
22
23  <select id="select3" onchange="myouji3()">
24    <option value="">選択なし</option>
25    <option value="アリス">アリス</option>
26    <option value="カレン">カレン</option>
27    <option value="クララ">クララ</option>
28  </select>
29
30  <div id="cocoichi">■選ばれた二人■
31    <div></div>
32    <div></div>
33  </div>
34
35  <script type="text/javascript">
36    let cocoichi=document.getElementById("cocoichi");
37
38    function myouji1(){
39      let namae=document.getElementById("cocoichi").firstElementChild;
40      addChild(namae);
41    }
42
43    function addChild(namae){
44      let select1=document.getElementById("select1").value;
45      namae.innerText=select1;
46      namae=cocoichi.appendChild(namae);
47    }
48  </script>
49</body>
50</html>
51

m.ts10806

2020/09/07 08:53

>初投稿、超初心者失礼します「初心者アイコン」がありますし、つけられてますし、書かなくても良いかと思います（その分文字数使うのはもったいないです） >後２つをどうしても表示できませんでした。「できない」ではなく「起きている現象」を書きましょう。エラーが出ているならエラーも確認してください。 https://teratail.com/help/question-tips#questionTips3-4

m.ts10806

2020/09/07 08:55

エラー確認方法：ブラウザの「開発ツール」を起動（F12）、「コンソール」タブ

行動規範の内容に同意します

回答1件

エラー出ます。

Uncaught ReferenceError: myouji2 is not defined
Uncaught ReferenceError: myouji3 is not defined

意味についてはGoogle翻訳にかけるなりなんなり調べてもらうとして、
現状の作りは非常に効率が悪いと思います。
「選択する」「選択した情報をリストに追記する」はどれを選んでも共通です。
同じ動作をするのに要素が増えればメソッドが増えるというのはよろしくありません。
法則性があるものはなるべくまとめるべきです。

ひとまず、下記で、「選択した自身」が取れます。

html
1  <select id="select1" class="select">
2    <option value="">選択なし</option>
3    <option value="本田">本田</option>
4    <option value="城田">城田</option>
5    <option value="中田">中田</option>
6  </select>
7
8  <select id="select2" class="select">
9    <option value="">選択なし</option>
10    <option value="藤原">藤原</option>
11    <option value="藤井">藤井</option>
12    <option value="藤岡">藤岡</option>
13  </select>
14
15  <select id="select3" class="select">
16    <option value="">選択なし</option>
17    <option value="アリス">アリス</option>
18    <option value="カレン">カレン</option>
19    <option value="クララ">クララ</option>
20  </select>

js
1window.addEventListener('DOMContentLoaded', (event) => {
2    const selectElements = document.querySelectorAll('.select');
3    for(i=0;i<selectElements.length;i++){
4		selectElements[i].addEventListener("change",function(e){
5			console.log(e.currentTarget);
6			
7		});
8    }
9});

「自身」が取れれば、「現在の選択値」もとれます。
例：console.log(e.currentTarget.value);

「自身」が取れるので、「どのSELECTなのか」も分かっています。
IDが振られているのでIDも参照してみてください。
例：console.log(e.currentTarget.id);

あとは、「既に選択された」ということをどこかに持っておく必要があります。
グローバル変数に「フラグ」として持っておけば良いかなと思います。
「2個まで」なら全体のカウントを持ってみたり。

js
1let selected = {};
2let count = 0;
3window.addEventListener('DOMContentLoaded', (event) => {
4    const selectElements = document.querySelectorAll('.select');
5    for(i=0;i<selectElements.length;i++){
6		selectElements[i].addEventListener("change",function(e){
7			if(e.currentTarget.id.value != "" && Object.keys(selected).indexOf(e.currentTarget.id) === -1 && count < 2){
8				selected[e.currentTarget.id] = true;
9				/*一覧に追加する処理*/
10				count++;
11			}else{
12				console.log("追加できません。");
13			}
14		});
15    }
16});