JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="room">
  <div class="form-group col-lg-8 room">
    <input type="text" class="form-control create-room" placeholder="Название комнаты">
    <div class="pull-right button-success add-room">+</div>
  </div>
</div>

SCSS

@mixin buttonAction($left){
  line-height: 33px;
  font-size: 31px;
  position: relative;
  top: -36px;
  left: $left;
  cursor: pointer;
  padding: 0 8px 1px 8px;
}

.create-room{
  width: 295px;
}
.button-success{
  @include buttonAction(-14px);
}
.button-error{
  @include buttonAction(49px);
}

JavaScript

$('body').on('click', '.add-room', function () {
  $(this).closest('.room').append(`<div class="form-group col-lg-8">
      <input type="text" class="form-control create-room" placeholder="Название комнаты">
      <div class="pull-right button-success add-room">+</div>
      <div class="pull-right button-error">-</div>
      </div>`);
   })