Display none some content and block one element

I would like to make 3 buttons wich each one make all the content div to display=”none” and depends on the button you have click one of the content div change to display=”block”. For example, If I click in the second button It will show only the second div content.

html

<button onclick="showPanel('1')">test1</button>
<button onclick="showPanel('2')">test2</button>
<button onclick="showPanel('3')">test3</button>

<div class="content">
<div id="1" className="content"><p>TEST1</p></div>
<div id="2" className="content"><p class="other">TEST2</p></div>
<div id="3" className="content "><p class="other">TEST3</p></div>
</div>

JS

function showPanel(id) {

    var elements = document.getElementsByClassName("content");

    for(let i = 0; i < elements.length() ; i++){
        document.getElementById(i).style.display="none";
    }
    
    document.getElementById(id).style.display="block";
  }