Start text animation on button click, clear and start animation again if button is clicked again

I've taken this snippet of code from a project I'm working on with a few friends and I'm looking for a bit of knowledge on getting a function to not activate until a button is clicked. Also, If the animation could be restarted every time the button is clicked, that would be great.

I made an attempt at using:

//  $('#savebtn').onClick(function(){
//  $('#setupTypewriter').addClass('typewriter');
//  });

and

$('#savebtn').onClick(function(){
setupTypewriter('typewriter');
});

in the js file to no avail. I'm probably missing something severely obvious that a second set of eyes will pick up as I am an amateur coder.

Also, if you notice random elements/code calling to something else in the snippets I've posted, they're probably unnecessary but I did just rip all of this code out of the bigger project like I mentioned :P

function setupTypewriter(t) {
  var HTML = t.innerHTML;

  t.innerHTML = "";

  var cursorPosition = 0,
    tag = "",
    writingTag = false,
    tagOpen = false,
    typeSpeed = 1,
    tempTypeSpeed = 0;

  var type = function() {

    if (writingTag === true) {
      tag += HTML[cursorPosition];
    }

    if (HTML[cursorPosition] === "<") {
      tempTypeSpeed = 0;
      if (tagOpen) {
        tagOpen = false;
        writingTag = true;
      } else {
        tag = "";
        tagOpen = true;
        writingTag = true;
        tag += HTML[cursorPosition];
      }
    }
    if (!writingTag && tagOpen) {
      tag.innerHTML += HTML[cursorPosition];
    }
    if (!writingTag && !tagOpen) {
      if (HTML[cursorPosition] === " ") {
        tempTypeSpeed = 0;
      } else {
        tempTypeSpeed = (Math.random() * typeSpeed) + 0;
      }
      t.innerHTML += HTML[cursorPosition];
    }
    if (writingTag === true && HTML[cursorPosition] === ">") {
      tempTypeSpeed = (Math.random() * typeSpeed) + 0;
      writingTag = false;
      if (tagOpen) {
        var newSpan = document.createElement("span");
        t.appendChild(newSpan);
        newSpan.innerHTML = tag;
        tag = newSpan.firstChild;
      }
    }

    cursorPosition += 1;
    if (cursorPosition < HTML.length - 1) {
      setTimeout(type, tempTypeSpeed);
    }

  };

  return {
    type: type
  };
}

var typer = document.getElementById('typewriter');

typewriter = setupTypewriter(typewriter);

typewriter.type();
.colbtns {
  left: 115px;
  bottom: 37.5px;
  position: relative;
  width: 140px;
  z-index: 3;
}

.colbtnd {
  left: 115px;
  bottom: 37px;
  position: relative;
  width: 140px;
  z-index: 3;
}

.ecutext-container {
  background-color: #000000;
  border-radius: .25rem;
  position: relative;
  height: 235px;
  width: 380px;
  left: 413px;
  bottom: 0px;
  z-index: 1;
}

.col {
  color: #fff;
}

.text-muted {
  color: #fff!important;
}

.btn-success {
  color: #fff;
  background-color: #1a75ff;
  border-color: #1a75ff;
}

.btn-success:hover {
  color: #fff;
  background-color: #005ce6;
  border-color: #005ce6;
}

.btn-success:active {
  color: #fff;
  background-color: #005ce6;
  border-color: #005ce6;
}

.btn-success:focus {
  color: #fff;
  background-color: #005ce6;
  border-color: #005ce6;
}

.ui-widget-content {
  border: 1px solid;
  border-color: #fff;
  background-color: #1a75ff;
  background: none;
}

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
  border: 1px solid #fff;
}

.slider {
  border: 1px solid;
  border-color: #fff;
  background-color: #fff;
}

#boost {
  color: #fff;
}

.var-highlight {
  color: #008ae6;
}

.string-highlight {
  color: #008ae6;
}

#typewriter {
  padding-top: 5px;
  font-size: 10px;
  color: #fff;
  margin: 0;
  overflow: hidden;
  font-family: "Lucida Sans Typewriter", "Lucida Console", Monaco, "Bitstream Vera Sans Mono", monospace;
  &:after {
    content: "|";
    animation: blink 500ms linear infinite alternate;
  }
}

@-webkit-keyframes blink {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-moz-keyframes blink {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes blink {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js" crossorigin="anonymous"></script>
  <link rel="stylesheet" type="text/css" href="index.css">
  <link href="https://code.jquery.com/ui/1.10.4/themes/ui-darkness/jquery-ui.css" rel="stylesheet">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="custom.css">
  <link rel="stylesheet" type="text/css" href="textanim.css">
</head>

<body>
  <div class="ecutext-container">
    <pre id="typewriter">
 <span class="var-highlight">Init</span> lmECU.exe = {
<span class="string">--------------------------------</span>
 lmECU:\ <span class="string">validating engineer key</span>
 lmECU:\ <span class="string">validation success</span>
 lmECU:\ <span class="string">accessing sensors</span>
 lmECU:\ <span class="string">parsing senslog.xml</span>
 lmECU-senslog:\ <span class="string-highlight">running diagnostics</span>
  		 <span class="string-highlight">- {0 faults detected</span>
 lmECU:\ <span class="string">applying Modifications...</span>
 lmECU:\ <span class="string">generating senslog.xml</span>
 lmECU:\ <span class="string">parsing senslog.xml</span>
 lmECU-senslog:\ <span class="string-highlight">running diagnostics</span>
		 <span class="string-highlight">- {0 faults detected</span>
 lmECU:\  <span class="string">ECU remap successful</span>
 lmECU:\  <span class="string">end lmECU.exe</span>
					<br></br>
					</pre>
  </div>
  <div class="savebtn">
    <div class="colbtns"><button class="btn btn-success form-control" id="savebtn">SAVE</button></div>
  </div>
  <div class="colbtnd"><button class="btn btn-success form-control" id="defaultbtn">DEFAULT</button></div>
  </div>
  </div>
  </div>
  <script src="config.js"></script>
  <script src="index.js"></script>
  <script src="textanim.js"></script>
</body>

</html>