Почему название кнопки берется из другого блока?

Есть код

$(document).ready(function() {
  $("button").click(function() {
    var btn = this;
    if (btn.loaded) {
      $(btn).prev("div").html(btn.originalContent);
      btn.loaded = false;
      $(btn).text('Сравнить цены');
    } else {
      btn.originalContent = $(btn).prev("div").html();
      $(btn).prop('disabled', true);
      $.get($(btn).data("url"), function(html) {
        $(btn).prev("div").html(html);
        $(btn).prop('disabled', false).text('Закрыть');
        btn.loaded = true;
      });
    }
  });

  $("button").click(function() {
    var btns = this;
    if (btns.loaded) {
      $(btns).prev("uve").html(btns.originalContent);
      btns.loaded = false;
      $(btns).text('Уведомление');
    } else {
      btns.originalContent = $(btns).prev("uve").html();
      $(btns).prop('disabled', true);
      $.get($(btns).data("url"), function(html) {
        $(btns).prev("uve").html(html);
        $(btns).prop('disabled', false).text('Закрыть');
        btns.loaded = true;
      });
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div"></div>
<button data-url="aviabiletyadler.php?a=1" style="font-size: inherit;float: left;display: block;margin: 0px auto;padding: 8px;background: #fff;border-top: 5px solid #4682b4;color: wheat;cursor: pointer;border-radius: 5px;color: #40406f;">Сравнить цены</button>
<div id="uve"></div>
<button data-url="/uvedomlenie.php?a=11" style="font-size: inherit;float: left;display: block;margin: 0px auto;padding: 8px;background: #fff;border-top: 5px solid #4682b4;color: wheat;cursor: pointer;border-radius: 5px;color: #40406f;">Уведомить</button>

Как разделить эти блоки чтоб кнопки при открывании и закрывании имели названия исходя из своих ID и своего скрипта? У меня сейчас если открыть кнопку Уведомление открывается правильный контент, но когда закрываю эту кнопку, то она меняет название на Сравнить цены


Ответы (0 шт):