如何在使用bootstrap时使用类型搜索在Chrome输入中显示X(清除)？

<input type="text" class="form-control" id="search-input" placeholder="Search">

<div class="input-group">
  <input type="text" class="form-control" id="search-input" placeholder="Search">
</div>

<div class="input-group">
  <input type="text" class="form-control" id="search-input" placeholder="Search">
  <div class="input-group-append">
    <!-- 清除按钮将在这里添加 -->
  </div>
</div>

<div class="input-group">
  <input type="text" class="form-control" id="search-input" placeholder="Search">
  <div class="input-group-append">
    <button class="btn btn-outline-secondary" type="button">X</button>
  </div>
</div>

.input-group-append button {
  display: none;
}

.input-group:hover .input-group-append button {
  display: block;
}

document.getElementById('search-input').addEventListener('input', function() {
  var searchInput = this;
  var clearButton = searchInput.parentNode.querySelector('.input-group-append button');
  
  if (searchInput.value.length > 0) {
    clearButton.style.display = 'block';
  } else {
    clearButton.style.display = 'none';
  }
});

document.querySelector('.input-group-append button').addEventListener('click', function() {
  var searchInput = this.parentNode.parentNode.querySelector('input');
  searchInput.value = '';
  this.style.display = 'none';
});