Opening a video player frame by clicking on the name from the list. And closing on a click on another. How?

Question

Video

Nakostylyal with someone else's code, but there are drawbacks. The name of the text (video number) disappears after clicking on it. And I want the player to open just below the text, not instead of it.
I would also like that by clicking on another video from the list, the previous player frame was closed back. And with this code it does not close (

<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>

Answer 1

Help)