Button outcome is stacked on top of each other – Blancer.com Tutorials and projects

I am currently making a calendar and would really appreciate some help as I am currently learning javascript by myself.

Whenever the month button is clicked, a new output is created and ‘stacked’ underneath the original entry. Is there a way to get the new month to replace the old one?

I have found problems online with button replacements but not code that includes multiple buttons / outputs.

Thanks for your help!! This is driving me crazy!!

<!DOCTYPE html> <!-- states the doctype -->
<html>
<head> <!-- heading -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<body>
</head>
<h1>
Calendar
</h1>

<div id="info" class="btn-group" style="width:100%;">
  <button onclick="daysinmonth(0, 2021)" style="width:20%;">January</button>
  <button onclick="daysinmonth(1, 2021)" style="width:20%;">Febuary</button>
  <button onclick="daysinmonth(2, 2021)" style="width:20%">March</button>
  <button onclick="daysinmonth(3, 2021)" style="width:20%">April</button>
  <button onclick="daysinmonth(4, 2021)" style="width:20%">May</button>
  <button onclick="daysinmonth(5, 2021)" style="width:20%">June</button>
  <button onclick="daysinmonth(6, 2021)" style="width:20%">July</button>
  <button onclick="daysinmonth(7, 2021)" style="width:20%">August</button>
  <button onclick="daysinmonth(8, 2021)" style="width:20%">September</button>
  <button onclick="daysinmonth(9, 2021)" style="width:20%">October</button>
  <button onclick="daysinmonth(10, 2021)" style="width:20%">November</button>
  <button onclick="daysinmonth(11, 2021)" style="width:20%; margin-bottom:40px;">December</button>
</div>

<script>
function daysinmonth(month, year) {
  //clearit();
  var dt = new Date();
  dt.setMonth(month+1);
  dt.setFullYear(year);
  dt.setMonth(dt.getMonth(), 0);
  var lastday = dt.getDate();
  daystomonth(lastday, month, year)
}

function daystomonth(lastday, month, year) {
  dayslist = []
  const d = new Date(year, month, 1);
  var firstday = d.getDay();
  for (i = 1; i < lastday+1; i++) {
    dayslist[i-1] =+ i;
  }
  calender(firstday, dayslist, lastday)
}

function calender(firstday, dayslist, lastday) {
  const body = document.body,
    tbl = document.createElement('table');
    tbl.style.border = '1px solid black';
    tbl.style.boxSizing = 'border-box';

  var daysnames = ["MONDAY", "TUESDAY", "WEDNESDAY", "THURSDAY", "FRIDAY", "SATURDAY", "SUNDAY"];
  var weekcount = 10; var count = 0;
  var daycount = firstday - 1;
  if (daycount == -1) { //Monday = 1
    daycount = 6;
  }

  for (let i = 0; i < weekcount; i++) {
    const tr = tbl.insertRow();
    if (i == 0) {
    for (let j = 0; j < 7; j++) {
      const td = tr.insertCell();
      td.appendChild(document.createTextNode(`${daysnames[j]}`));
      }
    }
    if (i == 1) {
      const tr = tbl.insertRow();
      for (let j = 0; j < 7; j++) {
        if (daycount <= j) {
          const td = tr.insertCell();
          td.appendChild(document.createTextNode(`${dayslist[count]}`));
          count = count + 1;
        } else {
          const td = tr.insertCell();
          td.appendChild(document.createTextNode(`  `));
        }
      }
    }
    if ( i > 1) {
      for (let j = 0; j < 7; j++) {
        if (count >= lastday) {
          const td = tr.insertCell();
          td.appendChild(document.createTextNode(`  `));
          count = count + 1;
        }
        else {
          const td = tr.insertCell();
          td.appendChild(document.createTextNode(`${dayslist[count]}`));
          count = count + 1;
        }
      }
    }
    if (count >= lastday) {
      weekcount = i + 1;
    } 
  }
  body.appendChild(tbl);
}
</script>