add room

HTML

<div class="col" id="first">
  <h3>Добавление комнат</h3>

  <button type="button" name="button" id="btn">комната</button>
  <button type="button" name="button" id="btn2">не комната</button>

  <ol class="box-for-rooms" id="first-box-room">
  </ol>
  <ol class="box-for-rooms" id="first-box">
  </ol>

</div>

<div class="col" id="second">
  <h3>Просмотр комнат</h3>
  <ol class="box-for-rooms" id="second-box-room">
  </ol>
  <ol class="box-for-rooms" id="second-box">
  </ol>
</div>

CSS

.col {
  width: 40%;
  border: 2px solid #000;
  float: left;
  margin: 5px;
  padding: 5px;
}

JavaScript

jQuery(document).ready(function($) {
  var
    boxfr = $('.box-for-rooms'),
    boxr = $('#first-box-room'),
    boxr2 = $('#second-box-room'),
    box = $('#first-box'),
    box2 = $('#second-box'),
    add = $('#btn'),
    add2 = $('#btn2'),
    max_id = 1,
    room, room2, room_id;

  add.on('click', function() {
  	room_id = getNewId();
    room = "";
    room += '<div class="title"><h5>Комната '+ room_id +'</h5></div>';
    boxr.append('<li class="room-added" data-room-id="'+ room_id +'"><button id="remove" data-room-id="'+ room_id +'">X</button>' + room + '</li>');
    boxr2.append('<li class="room-added" data-room-id="'+ room_id +'">' + room + '</li>');
  });
  add2.on('click', function() {
  	room_id = getNewId();
    room2 = "";
    room2 += '<div class="title"><h5>Не комната '+ room_id +'</h5></div>';
    box.append('<li class="room-added" data-room-id="'+ room_id +'"><button id="remove" data-room-id="'+ room_id +'">X</button>' + room2 + '</li>');
	box2.append('<li class="room-added" data-room-id="'+ room_id +'">' + room2 + '</li>');

  });
  
  boxfr.on("click", "#remove", function() {
    $('.room-added[data-room-id="'+$(this).data('room-id')+'"]').remove();
  });

  function getNewId() {
  	max_id += 1;
  	return max_id
  }

});