Toggling Between Multiple ContentBlocks

<style>
    .content-div { display: none; }
    #content1 { display: block; }
    #buttonRow button {margin: 10px 0; width: 30px;border: 1px solid #ccc;}
</style>
%%[
  Set @content_list = 'ContentBlock1,ContentBlock2,ContentBlock3'

  Set @id_rowset = BuildRowsetFromString(@content_list,",")
  set @id_row_count = RowCount(@id_rowset)
  if @id_row_count > 0 then

    for @i = 1 TO @id_row_count do
    Set @row = Row(@id_rowset, @i)
    Set @display_content = Field(@row,1)
  ]%%

<div id="content%%=v(@i)=%%" class="content-div">%%=ContentBlockByKey(@display_content)=%%</div>
%%[ next @i endif ]%%
<div class="button-row" id="buttonRow"></div>

<script runat="server">
    Platform.Load("Core", "1");
    var content_list = Variable.GetValue("@content_list");
</script>

<script>
var content_list = "<script runat='server'>Write(content_list)</script>";
var labelsArray = content_list.split(',');

var buttonRow = document.getElementById('buttonRow');

labelsArray.forEach((label, index) => {
    var button = document.createElement('button');
    button.textContent = index + 1;
    button.addEventListener('click', () => {
        document.querySelectorAll('.content-div').forEach(div => div.style.display = 'none');
        document.getElementById(`content${index + 1}`).style.display = 'block';
    });
    buttonRow.appendChild(button);
});
</script>