Как отключить ввод после x количества кликов в vanilla js?

Question

У меня есть кнопка ввода, которая генерирует новую форму каждый раз, когда вы нажимаете на нее, но я изо всех сил пытаюсь отключить ее после 10 щелчков, поскольку я не хочу, чтобы пользователь мог создавать бесконечное количество форм.Вот оно:

var room = 1;
function add_fields() {
  room++;
  var objTo = document.getElementById("room_fileds");
  var divtest = document.createElement("div");
  divtest.innerHTML =
    '<div class="control-group">' +
    '<label class="control-label">Company</label>' +
    '<div class="controls">' +
    '<input class="input-border collection-input "id="company" name="company' +
    room +
    ' "type="text" placeholder="Company">' +
    "</div>" +
    "</div>" 

  objTo.appendChild(divtest);
}

<div id="room_fileds">
  <div class='label'>Drop off address:</div>
</div>
<input type="button" id="more_fields" class="btn mt-3 mb-2" onclick="add_fields();" value="Add More" />

Вот что я попробовал:

var room = 1;
function add_fields() {
 if(room < 11){
   room++
 }
  var objTo = document.getElementById("room_fileds");
  var divtest = document.createElement("div");
  divtest.innerHTML =
    '<div class="control-group">' +
    '<label class="control-label">Company</label>' +
    '<div class="controls">' +
    '<input class="input-border collection-input "id="company" name="company' +
    room +
    ' "type="text" placeholder="Company">' +
    "</div>" +
    "</div>" 

  objTo.appendChild(divtest);
}

Answer 1

Удалить или отключить кнопку для выполнения этого действия?:

var room = 1;
function add_fields() {
    if(room < 11) {
        room++

        var objTo = document.getElementById("room_fileds");
        var divtest = document.createElement("div");
        divtest.innerHTML =
        '<div class="control-group">' +
        '<label class="control-label">Company</label>' +
        '<div class="controls">' +
        '<input class="input-border collection-input "id="company" name="company' +
        room +
        ' "type="text" placeholder="Company">' +
        "</div>" +
        "</div>" 

        objTo.appendChild(divtest);
    } else {
        document.getElementById('more_fields').setAttribute('disabled', 'disabled');
        //or
        document.getElementById('more_fields').remove();
    }
}

или показать предупреждение - ваш выбор

Answer 2

Оберните оператор if вокруг всей функции, и он должен работать так, как вы ожидаете.

var room = 1
function add_fields() {
  if (room < 11) {
    room++

    var objTo = document.getElementById("room_fileds")
    var divtest = document.createElement("div")
    divtest.innerHTML =
      '<div class="control-group">' +
      '<label class="control-label">Company</label>' +
      '<div class="controls">' +
      '<input class="input-border collection-input "id="company" name="company' +
      room +
      ' "type="text" placeholder="Company">' +
      "</div>" +
      "</div>"

    objTo.appendChild(divtest)
  }
}