for of 分が処理されない(エラーも出ない)

状況：

１．ダブルクリックして要素(テキストエリア)を作成　※同じ要素は複数作成可能
２．要素を右クリック　メニューが表示され要素の選択をクリック
３．現時点で要素の隣にチェックボックスがあればチェックボックスを削除し、なければ作成する

原因：

ソースコードの追加と変更により、上記3番の部分が反応しなくなった

for文とquerySelectorAll追加に伴い、if分の条件を変更したらif分の反応がなくなった(エラーも出ない)
追加
const qa = document.querySelectorAll('.ip-class');
for (const test of qa) {

変更
if(document.querySelector('.ip-class') != null) →　if(test != null) {

追加、変更前はif文は動作していた。
エラーも出ておらず不明。

推測：

検証として、あらかじめHTMLにて<input type='checkbox' class="ip-class">を入れておいた。
その後に、追加したfor文でイベントを行ってみたらif分の反応が返ってきた。
おそらくquerySelectorAll('ip-class')を記述してはいるが、まだ要素が作成されていないものに関しては
for of文が処理できないのではないか？

仮にそうだとしたらif文の条件式はどうする？

追記：

addEventListenerを使用したが、要素が増えるごとに処理が重複して行う為、今回の様なtoggle形式に近いイベント処理ができない。
要素が一つの場合：１回　
要素が二つの場合：２回　　
要素が三つの場合：３回　　
処理が累積して行われる
1+2+3=6

の様に仮に要素が３つ作成された状態で行うと処理が計６回も行われる。
要素が増えるたびに処理が累積して増えていく。
余分に行う処理の為、表示、非表示の切り替えが上手く作動しない。

実現したいこと：

ip-class全要素ごとの有無を確認して、if文の動作を行うようにしたい。
if(test != null)

if(document.querySelector('.ip-class')でのif分だと、要素単体にしか反映されないので、
for of文を使用する事で、同じ名前の全要素を取得しようとした。

全ソースコード
https://codepen.io/mio-rei/pen/RwKodmX

ソースコード抜粋

JavaScript
1document.addEventListener('dblclick',(e)=>{   
2  e.preventDefault();
3  if(!e.target.closest('.nodoubleclick')){
4    const textArea = document.createElement('textarea');
5    document.querySelector('body').appendChild(textArea);
6
7      document.querySelector('.elm').onclick = () => {
8        
9        const qa = document.querySelectorAll('.ip-class');
10        for (const test of qa) {
11        if(test != null) {
12          alert('true');
13          
14            document.querySelector('.text-number').remove();
15
16            document.querySelector('.ip-class').remove();
17            
18            document.querySelector('.di-class').parentNode.insertBefore(textArea, document.querySelector('.di-class'));
19
20            document.querySelector('.di-class').remove();
21            
22          } else {
23            alert('false');
24    
25            const diClass = document.createElement('div');
26            diClass.classList.add('di-class');
27
28            const textNumber = document.createElement('input');
29            textNumber.setAttribute('type', 'number');
30            textNumber.classList.add('text-number');
31
32            const ipClass = document.createElement('input');
33            ipClass.setAttribute('type','checkbox');
34            ipClass.classList.add('ip-class');
35          
36            document.querySelector('body').appendChild(diClass);
37            diClass.style.backgroundColor = 'yellow';
38            diClass.style.display = 'inline-block';
39            diClass.appendChild(textNumber);
40            diClass.appendChild(ipClass);
41            diClass.appendChild(textArea);
42            textNumber.style.display = 'none';
43          }
44        }
45         
46        
47      let sizeUp = document.getElementById('sizeup');
48      let sizeNum = document.getElementById('sizenum');
49    
50        sizeUp.onclick = () => {
51          const qa = document.querySelectorAll('.ip-class');
52          for (const test of qa) { 
53            if(test.checked == true) {
54              sizeNum.value = Number(sizeNum.value) + 1;
55              test.nextElementSibling.style.fontSize = sizeNum.value + 'px';
56            }
57          }
58          
59        }
60        
61      }