Focussing timeline

I'm working on a small piece of my personal website. I'd like a timeline logging all of my relevant achievements in my career in Computer Science, in general. I'd like to implement a feature that would allow the user to focus on a specific section of the timeline.

I have implemented a fairly sparse version of what I would like. I populate an ordered list via JavaScript, with each list element containing a single child element containing a year. When the user clicks a year that is not the last year in the timeline, it will delete all but the selected year and the proceeding year, then position the selected year on the left end of the timeline and the proceeding year on the right end of the timeline.

I intend to populate the area in between with month that will exhibit the same focus function described above, in order to view each event between the months.

My concern is that I don't think this is the most efficient way of implementing what I want, hence my presence on SO. The implementation of this feature is, in my opinion, quite messy. However, due to the absence of great degrees of experience in the field of front-end development, my opinion may very well be wrong.

Naturally, I've added the code to this question. I really don't know whether or not this is the best implementation; any advice would be much appreciated.

let focussed = false;

document.addEventListener("DOMContentLoaded", () => {
  generateTimeline();
});

function generateTimeline() {
  let timeline = document.getElementsByClassName("timeline")[0];
  timeline.appendChild(createYearElement("2019"));
  timeline.appendChild(createYearElement("2018"));
  timeline.appendChild(createYearElement("2017"));
  timeline.appendChild(createYearElement("2016"));

  for (let i = 0; i < timeline.children.length; i++) {
    const child = timeline.children[i];
    let text = child.children[0];

    if (text.innerHTML === "2016") continue;

    text.addEventListener("click", () => {
      let year = text.innerHTML;
      let lastYear = null;

      if (focussed) return;

      if (year === "2017") {
        lastYear = "2016";
      }

      if (year === "2018") {
        lastYear = "2017";
      }

      if (year === "2019") {
        lastYear = "2018";
      }

      if (year !== "2019") removeYearElement("2019");
      if (year !== "2018" && lastYear !== "2018") removeYearElement("2018");
      if (year !== "2017" && lastYear !== "2017") removeYearElement("2017");
      if (lastYear !== "2016") removeYearElement("2016");

      let lastYearElement = document.getElementById(`${lastYear}YearElement`);
      lastYearElement.style.marginLeft = "400px";
      focussed = !focussed;
      createBackButton();
    });
  }
}

function createYearElement(year) {
  let element = document.createElement("li");
  element.setAttribute("class", "year");
  element.setAttribute("id", `${year}YearElement`);
  let text = document.createElement("div");
  text.innerHTML = year;
  element.appendChild(text);
  return element;
}

function createBackButton() {
  let button = document.createElement("button");
  button.innerHTML = "Back";
  button.setAttribute("id", "backButton");

  button.addEventListener("click", () => {
    let timeline = document.getElementsByClassName("timeline")[0];
    let childrenArray = Array.slice(timeline.children);

    for (let i = 0; i < childrenArray.length; i++) {
      const child = childrenArray[i];

      child.remove();
    }

    generateTimeline();
    focussed = !focussed;
    button.remove();
  });

  document.getElementsByClassName("timeline_box")[0].appendChild(button);
}

function removeYearElement(year) {
  let timeline = document.getElementsByClassName("timeline")[0];

  for (let i = 0; i < timeline.children.length; i++) {
    const child = timeline.children[i];

    if (child.children[0].innerHTML === year) child.remove();
  }
}

.timeline_box {
  width: 80%;
  height: 50%;
  background: lightslategrey;
  margin: auto;
  margin-top: 10%;
  display: grid;
  justify-content: center;
  align-content: center;
  position: relative; 
  
  }

.timeline_wrapper {
  width: 500px; }

.timeline_line {
  z-index: 1;
  width: inherit;
  height: 20px;
  margin-top: 5px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 45%, #fd2600 51%, rgba(255, 255, 255, 0) 57%, rgba(255, 255, 255, 0) 100%); }

.timeline {
  z-index: 2;
  list-style: none;
  width: inherit; }
  .timeline > li {
    float: left;
    margin-left: 100px;
    background: greenyellow;
    padding: 5px;
    border-radius: 5px; }
    .timeline > li:nth-child(1) {
      margin-left: 0; }

button {
  width: 100px;
  height: 30px;
  color: black;
  margin: auto; }

html,
body,
element,
* {
  margin: 0;
  padding: 0;
  border: 0; }

  <body>
    <div class="timeline_box">
      <div class="timeline_wrapper">
        <ol class="timeline">
        </ol>
        <div class="timeline_line"></div>
      </div>
    </div>
  </body>