Открытие фрейма плеера видео по клику на название со списка. И закрытие по клику на другое. Как?

Накостылял с чужого кода, но есть недостатки. Исчезает название текста (№ видео) после клика на него. А хочется чтобы плеер открывался просто ниже текста, не вместо него.
Также хотелось бы чтобы по нажатию на другое видео со списка, предыдущий фрейм плеера обратно закрывался. А с этим кодом он не закрываецо(

<div class="slide">
        <div id="id1"><div class="imgbox" onclick="vid1()">№1 видео</div></div>
  
  		
			<script>
            var sales_div = document.getElementById("id1");
            function vid1(){
            id1.innerHTML = '<div class="imgbox"><iframe width="640" height="360" src="видос1" frameborder="0" allowfullscreen></iframe></div>';
            }
            function cancel(){
            id1.innerHTML = '<div class="imgbox" onclick="buy()">v1</div>';
            }
            </script>
			
			
	   
        <div id="id2"><div class="imgbox" onclick="vid2()">№2 видео</div></div>
  
  		
			<script>
            var sales_div = document.getElementById("id2");
            function vid2(){
            id2.innerHTML = '<div class="imgbox"><iframe width="640" height="360" src="видос2" frameborder="0" allowfullscreen></iframe></div>';
            }
            function cancel(){
            id2.innerHTML = '<div class="imgbox" onclick="buy()">v2</div>';
            }
            </script>
        
		<div id="id3"><div class="imgbox" onclick="vid3()">№3 видео</div></div>
  
  		
			<script>
            var sales_div = document.getElementById("id3");
            function vid3(){
            id3.innerHTML = '<div class="imgbox"><iframe width="640" height="360" src="https://видос3" frameborder="0" allowfullscreen></iframe></div>';
            }
            function cancel(){
            id3.innerHTML = '<div class="imgbox" onclick="vid3()">v3</div>';
            }
            </script>	
			
</div>