How to remove the active state on a button when clicking on an input

I am building a component with 4 preset buttons and a custom range input. I am able to toggle the active state on the buttons when clicking them but I want to remove the active state from all the buttons when I click into the input. I also want to clear the input field when I click out of the input.

HTML code:

<div class="row selectors d-flex justify-content-center" id="rc-button-bar">
        <div class="col-xs-6 col-sm-6 col-md-2 mb-2">
          <button id="btn-25" class="btn-primary ce-button" data-value="25">25%</button>
        </div>
        <div class="col-xs-6 col-sm-6 col-md-2 mb-2">
           <button id="btn-50" class="btn-primary ce-button" data-value="50">50%</button>
          </div>
        <div class="col-xs-6 col-sm-6 col-md-2 mb-2">
            <button id="btn-85" class="btn-primary ce-button is-active" data-value="85">85%</button>
          </div>
        <div class="col-xs-6 col-sm-6 col-md-2 mb-2">
            <button id="btn-100" class="btn-primary ce-button" data-value="100">100%</button>
          </div>
        <div class="col-sm-12 col-md-2 mb-2 d-flex align-items-center">
          <input id="customPercent" class="numbers" type="text" placeholder="ex: 80"></input>&nbsp;<span>%</span>
        </div>
      </div>

CSS:

.btn-primary.ce-button {
  width: 100%;
  height: 48px;
  padding: auto;
  border: 4px solid #0079c1;
  border-radius: 5px;
  background: transparent;
  color: #0079c1;
  font-weight: bold;
  cursor: pointer;
}
.btn-primary.ce-button:hover,
.btn-primary.ce-button:active {
  background: #0079c1;
  border-radius: 5px;
  color: #ffffff;
  font-weight: bold;
  cursor: pointer !important;
}
.is-active {
  background: #0079c1 !important;
  border-radius: 5px !important;
  color: #ffffff !important;
  font-weight: bold !important;
}

JavaScript:

let btnContainer = document.getElementById("rc-button-bar");
let btns = btnContainer.getElementsByClassName("ce-button");
let input = document.getElementById("customPercent");

for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
    (document.querySelector('.is-active')) ? document.querySelector('.is-active').classList.remove('is-active') : '';
    this.classList.add('is-active');
  });
}

Here is a link to my codepen so you can see it in full https://codepen.io/RECopeland/pen/rNEMMYZ