Dynamic and custom inputs

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document</title>
</head>
<style>
   form{width: 600px;
   display: flex;
   align-items: center;
   flex-wrap: wrap;
}
   .input-box * {
    box-sizing: border-box;
}

.input-box {
    position: relative;
    display: flex;
    align-items: center;
  height: 65px;
    width: 450px;
    max-width: 100%;
    border: 1px dashed #c4c4c4;
    border-radius: 3px;
    padding: 0 20px;
    transition: 0.2s;
}

.input-box.is-active {
    background-color: rgba(0, 20, 20, 0.03);
}

input[type="file"] {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 80%;
    opacity: 0;
    cursor: pointer;
}

input[type="file"]:focus {
    outline: none;
}

.inf__btn {
    display: inline-block;
    border: 1px solid #c4c4c4;
    border-radius: 3px;
    padding: 5px 12px;
    margin-right: 10px;
    font-size: 10px;
    text-transform: uppercase;
}

.inf__hint {
    flex: 1;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.input-file-del{

      float:right;
      box-sizing: border-box;
      width: 53px;
      height: 23px;
      padding: 2px;
      margin-right: 2px;
      text-align: center;
      border: 1px solid #adadad;
      color: #7b7b7b;
      cursor: pointer;
      font-size: 12px;
      vertical-align: middle;
   }
</style>
<body>

   <form id="form">
        <div class="input-box">
         <span class="inf__btn">Przeglądaj</span>
         <span class="inf__hint">nazwa przesłanego pliku</span>
         <input type="file" name="files">
         <div class="input-file-del " >Usuń <span>&#10006;</span></div>
      </div>
  </form>
  <div class="add" onclick="addNew()">Add</div>

   <script>
var max = 8; //maximum input
var now = document.querySelectorAll('input[type="file"]');
var counter = now.length;
var box = document.querySelector('#form');


function addNew(){
   if (counter < max) {
      var newFile = document.createElement('div');
        newFile.setAttribute('class', 'input-box');
        document.querySelector('#form').appendChild(newFile);
   newFile.innerHTML = '<span class="inf__btn">Przeglądaj</span><span class="inf__hint">nazwa przesłanego pliku</span><input type="file" name="files"><div class="input-file-del remove" >Usuń <span>&#10006;</span></div>'
   counter++;
   } else {
      console.log('błąd');
      alert('Maksymalnie 8 plików');
   }
}

// remove
box.addEventListener('click', removeItem);
function removeItem(e){
   if (e.target.classList.contains('remove')) {
      let file = e.target.parentElement;
      console.log(file);
      box.removeChild(file);
      counter--;
      }
}


   </script>
</body>
</html>