添加/删除块jQuery

Question

这是我第二次写同样的问题，我无法回答。我正在编写一个脚本，在单击添加按钮后添加div块。 一切都很好，但是在添加了第二个递增的块之后。

例如：第二次点击后，总共添加4个区块。

点击删除最后一个删除后。

要获得清晰预览，您可以通过以下链接查看：https://bookanytravel.com/hotel/city-palace-hotel-tashkent/#rooms 在房间选项卡中，您可以看到我正在尝试修复的房间类型

HTML

<div class="form_element select room-type">

<div class="duo_left">
    <label class="form_name"><?=pll__('Room type')?></label>
    <select name="room-type[]" class="selectpicker multi-fields">
        <?if($single != null) :?>
            <option value="Single Room">Single Room</option>
        <? endif; ?>
    </select>
</div>

<div class="duo_right">
    <label class="form_name"><?=pll__('Number')?></label>
    <select name="room-number[]" class="selectpicker multi-fields">
        <option value="0" selected>0</option>
        <? for ($i=1; $i<=10; $i++) : ?>
            <option value="<?=$i?>"><?=$i?></option>
        <? endfor; ?>
        <option value="10+">10+</option>
    </select>
</div>

<div class="buttons">
    <div id="submit_button" >
        <button id="addField" name="add" type="button" class="form_button1">&#43;</button>
    </div>
    <div id="submit_button" >
        <button id="removeField" data-count="0" name="remove" type="button" class="form_button1">&#45;</button>
    </div>
</div>

Jquery的

var removeBtn = $("#removeField");
        $("body").on("click", "#addField", function(e) {
          e.preventDefault();

          var room = $(".room-type").first();
          var count = removeBtn.data("count");

          if (count > 0) {
            removeBtn.data("count", count++).attr("data-count", count);
          }
          else {
            removeBtn.data("count", 1).attr("data-count", 1);
          }

          room.clone(false).appendTo(".room-type");
        });

        $("body").on("click", "#removeField:not([data-count=0])", function(e) {
          e.preventDefault();
          var count = removeBtn.data("count");

          if (count > 0) {

            $(".room-type").last().remove();
          }
        });