How to fix the bug in task Manager?

I have the code:
function instruments(){
 triTochki = document.getElementsByClassName('tri-tochki')
 for (i = 0;i<triTochki.length;i++) {
 let a = triTochki[i];
 a.addEventListener('click', function(e) {
e.target.nextElementSibling.classList.toggle('displayBlock');
});
}
}

function showTasks(arr){
 let a = document.getElementById('css')
 if(a != null) a.remove();
 let s = document.createElement('div')
 s.id = 'css';

 for(i=0; i<arr.length; i++){
 let taske = document.createElement('div')
taske.classList.add('task')

 let tit = document.createElement('div');
tit.classList.add('title');
 tit.innerText = arr[i].title;
taske.appendChild(tit);

 let descr = document.createElement('div');
descr.classList.add('descr');
 descr.innerText = arr[i].desc
taske.appendChild(descr);

 let bott = document.createElement('div');
bott.classList.add('bott')
taske.appendChild(bott);

 let prior = document.createElement('div');
prior.classList.add('prior');
 prior.innerText = arr[i].prio;
bott.appendChild(prior);

 let menu = document.createElement('div');
menu.classList.add('menu');
bott.appendChild(menu);

 triTochki = document.createElement('div')
triTochki.classList.add('tri-tochki');
 triTochki.innerText = '...'
 triTochki.dataset.index = arr[i].index;
bott.appendChild(triTochki);


 let menuVipad = document.createElement('div');
menuVipad.classList.add('menu-vipad');
menu.appendChild(menuVipad)

 let arrowUp = document.createElement('div')
arrowUp.classList.add('arrow-up');
menuVipad.appendChild(arrowUp);

 done = document.createElement('div');
done.classList.add('done');
 done.dataset.index = arr[i].index;
menuVipad.appendChild(done);
 done.innerText = 'done'

 edit = document.createElement('div')
 edit.dataset.index = arr[i].index;
edit.classList.add('edit');
menuVipad.appendChild(edit);
 edit.innerText = 'edit'

 del = document.createElement('div')
 del.dataset.index = arr[i].index;
del.classList.add('del');
menuVipad.appendChild(del);

s.appendChild(taske);
}
tasks.appendChild(s);
instruments()
}

.menu-vipad{
 width: 50px;
 height: 58px;
 border: 2px solid black;
 text-align: center;
 background-color: #fff;
 position: relative;
 display: none;
 margin-top: 8px;
}
.displayBlock{display: block}

<div class="bott">
 <div class="prior">easy</div>
 <div class="menu">
 <div class="tri-tochki">...</div>
 <div class="menu-vipad">
 <div class="arrow-up"></div>
 <div class="done">done</div>
 <div class="edit">edit</div>
 <div class="del">delete</div>
</div>
</div>
 </div>


When because of the tri-tochki should appear menu-vipad. Everything works, but the code does not find the element. Help, I have 5 hours to do.
April 3rd 20 at 18:45
1 answer
April 3rd 20 at 18:47
The question is not relevant!

Find more questions by tags JavaScript