JSFiddle - React, Tailwind, and code Playground

HTML

<div class="numbertype">
  <input type="hidden" name="rooms" id="rooms" value="1" min="1" max="20" />
  <div class="design">
    <span class="result">1 комната</span>
    <span class="minus"></span>
    <span class="plus"></span>
  </div>
</div>

CSS

*,
*:after,
*:before {
  box-sizing: border-box;
}

.numbertype {
  position: relative;
  font-family: Consolas;
  user-select: none;
  cursor: default;
}

.numbertype > .design {
  position: relative;
  overflow: hidden;
  background-color: #fff;
  display: inline-block;
  text-align: center;
  padding: 5px;
  border-radius: 45px;
  border: 1px solid #ff00ff;
  min-width: 200px;
}

.numbertype > .design > .minus,
.numbertype > .design > .plus {
  display: block;
  line-height: 1;
  border-radius: 50%;
  background-color: #ff98ff;
  font-size: 40px;
  cursor: pointer;
  width: 40px;
  height: 40px;
  position: relative;
  overflow: hidden;
}

.numbertype > .design > .minus {
  float: left;
}

.numbertype > .design > .plus {
  float: right;
}

.numbertype > .design > .minus:before {
  content: "-";
}

.numbertype > .design > .plus:before {
  content: "+"
}

.numbertype > .design > .minus:before,
.numbertype > .design > .plus:before {
  display: block;
  margin-top: -2px;
}

.numbertype > .design > .result {
  display: inline-block;
  top: 10px;
  position: relative;
}

JavaScript

$(function() {
  function pluralize(n, one, few, many) {
    var d = parseInt(n.toString().substr(-1));
    if (n > 10 && n < 20) return many;
    if (d == 1) return one;
    if (d >= 2 && d <= 4) return few;
    /*otherwise*/
    return many;
  }
  var design = $(".numbertype > .design"),
    input = $(".numbertype > input"),
    result = $(".result", design),
    pBtn = $(".plus", design),
    mBtn = $(".minus", design);
  if (input.length) {
    var max = isNaN(parseInt(input[0].max)) ? 1 : parseInt(input[0].max),
      min = isNaN(parseInt(input[0].min)) ? 1 : parseInt(input[0].min),
      val = isNaN(parseInt(input[0].value)) ? 1 : parseInt(input[0].value),
      change = function(e) {
        /**
         *** Здесь можно реализовать склонение слова комната
         **/
        result.text(val + ' ' + pluralize(parseInt(val), 'комната', 'комнаты', 'комнат'));
      };
    pBtn.on("click", function(e) {
      e.preventDefault();
      val = val >= max ? max : val + 1;
      input.val(val).trigger("change");
      return !1;
    });;
    mBtn.on("click", function(e) {
      e.preventDefault();
      val = val <= min ? min : val - 1;
      input.val(val).trigger("change");
      return !1;
    });
    input.on("input change", change).val(val).trigger("change");
  }
});