HTMLのリストにjavascriptで追加したいんですが、わかりません。

Question

動き
・オレンジプラス
→学校の中にある１限や３限などの項目を追加することができる。
→オレンジプラスボタンを押すとテキストボックス、カラーピッカー、追加ボタンの３つを表示・非表示できる。（デフォルトは非表示状態）

・ピンクプラス
→学校やプライベートなどの黒丸の項目を追加することができる。

したいこと
・ピンクプラスで追加ボタンを押した際にオレンジプラスボタンも一緒に追加されるようにしたい。

	<script type="text/javascript" src="list.js"></script>
			<!--リストの作成-->
			<ul>
				<li>
					<label contentEditable="true">学校<input type="checkbox" onchange="clickBtn2(this.checked)" style="display: none;" checked></label>
					<div id="school">
					<ul id="FavList"></ul>
						<input type="text" id="favtext" style="display:none;">
						<input type="color" id="choicecolor" style="display:none;">
						<input type="button" id="addurl" value="追加" onclick="bar();" style="display:none;">
					<label>
							<img src="プラスオレンジ.png">
							<input type="checkbox" style="display: none;" onchange="clickBtn1(this.checked)">
					</label>
					</div>
				</li>
			</ul>

	<ul id="pinkList"></ul>
			<ul>
					<input type="text" id="plustext" style="display:none;">
					<input type="button" id="oookkk" value="追加" onclick="bar2();" style="display:none;">
					<label>
						<img src="プラスピンク.png">
						<input type="checkbox" style="display: none;" onchange="clickBtn3(this.checked)">
					</label>
			</ul>

		</div>

//↓リストの追加オレンジ
function bar() {
    // a 要素の作成と属性の指定
    var newAnchor = document.createElement("a");
    var newTxt = document.createTextNode( document.getElementById("favtext").value );
    newAnchor.appendChild( newTxt );
   
    // li 要素の作成
    var newLi = document.createElement("li");
    newLi.appendChild ( newAnchor );
	newLi.style.color = document.getElementById('choicecolor').value;	//色適応
	document.getElementById('FavList').contentEditable = true;	//リストの編集
   
    // リストに追加
    var list = document.getElementById("FavList");
    list.appendChild( newLi );   
}

//↓オレンジボタン表示非表示
//初期表示は非表示
function clickBtn1(){
	const favtext = document.getElementById("favtext");
	const addurl = document.getElementById("addurl");
	const choicecolor = document.getElementById("choicecolor");

	if(favtext.style.display=="block"){
		// noneで非表示
		favtext.style.display ="none";
	}else{
		// blockで表示
		favtext.style.display ="block";
	}

	if(addurl.style.display=="block"){
		// noneで非表示
		addurl.style.display ="none";
	}else{
		// blockで表示
		addurl.style.display ="block";
	}

	if(choicecolor.style.display=="block"){
		// noneで非表示
		choicecolor.style.display ="none";
	}else{
		// blockで表示
		choicecolor.style.display ="block";
	}
}


//↓親要素表示非表示
function clickBtn2(){
	const school = document.getElementById("school");

	if(school.style.display=="block"){
		// noneで非表示
		school.style.display ="none";
	}else{
		// blockで表示
		school.style.display ="block";
	}
}

//↓ピンクボタン表示非表示
//初期表示は非表示
function clickBtn3(){
	const plustext = document.getElementById("plustext");
	const oookkk = document.getElementById("oookkk");

	if(plustext.style.display=="block"){
		// noneで非表示
		plustext.style.display ="none";
	}else{
		// blockで表示
		plustext.style.display ="block";
	}

	if(oookkk.style.display=="block"){
		// noneで非表示
		oookkk.style.display ="none";
	}else{
		// blockで表示
		oookkk.style.display ="block";
	}
}

//↓リストの追加ピンク
function bar2() {
    // a 要素の作成と属性の指定
	 var newAnchor = document.createElement("a");
    var newTxt = document.createTextNode( document.getElementById("plustext").value );
    newAnchor.appendChild( newTxt );

    // ul 要素の作成
    var newLi = document.createElement("li");
    newLi.appendChild ( newAnchor );

    // リストに追加
    var list = document.getElementById("pinkList");
    list.appendChild( newLi );   
}

Comments

[azuapricot]

「ピンクプラスで追加ボタンを押した際にオレンジプラスボタンも一緒に追加されるようにしたい。」
これの仰ってる意味が良く分かりません。
一緒に何を追加したいんですか？
テキストボックスの内容ですか？

[asahinon]

ピンクプラスの追加ボタンでは黒丸の項目しか増やすことができないので、学校部分にある１限、３限などの入力した項目を増やせるようにオレンジプラスボタン（テキストボックス、カラーピッカー、追加ボタンの３つデフォルトである非表示の状態）を黒丸の項目と一緒に追加できるようにしたいです。わかりづらくてすみません…

[azuapricot]

「オレンジ+ボタンを黒丸の項目と一緒に追加できるようにしたい」
やっぱり仰ってる意味がよくわからないのですが、やりたいことを図示していただけませんか？

回答が得られないということは質問内容が悪くて回答者が理解できずに諦めていることがほとんどです。

[azuapricot]

ピンク側の追加ボタンに機能を追加したいということですか？

ピンク側の追加ボタン押下
↓
ピンク側のテキストボックスの入力内容を下部リストに反映
＆
オレンジ側のテキストボックスの入力内容があれば上部リストに反映

こういうことでしょうか？

Answer 1

まず念頭においてほしいのが id は重複できないということです。何度も追加するものには id を使わず class にしておきます。
要素自体は作れると思うので省略しますが、増えてくると面倒になるので template 要素を使ったほうがいいでしょう。IE も対応しなければならないなら非表示の要素を使うとかしてください。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/template

    var newLi = document.getElementById('newlist').content.cloneNode(true).querySelector('*');
    newLi.querySelector('label').insertAdjacentText('afterbegin', document.getElementById('plustext').value);
    newLi.querySelector('[name="orange"]').addEventListener('click', clickBtn1, false);
    newLi.querySelector('.addurl').addEventListener('click', bar, false);
    list.appendChild(newLi);

イベント処理も id ではなく、イベントオブジェクトから要素をたどるようにします。

function clickBtn1(event) {
    const li = event.target.closest('li'); // not IE
/*
    const favtext = document.getElementById("favtext");
    const addurl = document.getElementById("addurl");
    const choicecolor = document.getElementById("choicecolor");
*/
    const favtext = li.querySelector(".favtext");
    const addurl = li.querySelector(".addurl");
    const choicecolor = li.querySelector(".choicecolor");

https://developer.mozilla.org/ja/docs/Web/API/Event/target