заменить содержимое JQuery AJAX

Question

Я использую .append для каждой из данных, которые я хочу загрузить, но я хочу изменить данные на моем сайте, например, если я нажму кнопку 1, она покажет название и цену комнаты, а затем, если я нажму кнопку 2, теперь онадолжен показать данные button2 и удалить данные из button1 на моем сайте. вот чего я хочу. Прямо сейчас он только складывает данные каждой кнопки, когда я нажимаю эти кнопки различий. Как Single Room 45 $ Family Room 49 $ это складывается .. это мой код

$(document).ready(function() {
        $(".bkng").on("click", function(event) {
              event.preventDefault();

            var id = $(this).data('room-id');
                console.log(id);


                if(id != '')

                {
                    $.ajax(
                {
                    type:"POST",
                    url : "Pages/ajax",
                    data:{id:id},


                    success:function(data)
                    {
                        console.dir(data);
                        if (data) {


                        result = JSON.parse(data);

                        $("#test1").append(result[0]['name']);
                        $("#test2").append(result[0]['price']);
                        $("#test3").append(result[0]['price']);
                        }
                        else {
                             $('#test1').append('no records found');
                        }


                    }
                });
            }


            });
        }); 

Вот изображение https://i.stack.imgur.com/0Vh8x.jpg Вот мой HTML-код

<div id = "test1" class = "inliners1"></div>
<div class = "inliners2" id = "test3">PHP &nbsp;</div>

        <h3 class = "your-stay" id = "test2">Total:

Код кнопки

 <div class="col-4">
      <h3 class = "bookingroom">PHP 2,500</h3>
      <h5 class = "ab">PER NIGHT</h5>
      <h5 class = "taxes">Including Taxes & Fees</h5>
      <button class="bkng bkn-room trans_200" data-room-id ="1">BOOK NOW</button>
<div class="col-4">
      <h3 class = "bookingroom">PHP 2,750</h3>
      <h5 class = "ab">PER NIGHT</h5>
      <h5 class = "taxes">Including Taxes & Fees</h5>

      <button class="bkng bkn-room trans_200" data-room-id="2">BOOK NOW</button>

Answer 1

Проблема с append () заключается в том, что он добавляет строку к селектору и рекламу при каждом нажатии. Вы можете немного изменить структуру html (добавив элемент) и использовать html (), чтобы отобразить правильные данные, не перезаписывая заголовок:

html:

<div id = "test1" class = "inliners1"><span></span></div>
<div class = "inliners2" id = "test3">PHP &nbsp;<span></span></div>
<h3 class = "your-stay" id = "test2">Total:<span></span></h3>

jQuery:

$("#test1>span").html(result[0]['name']);
$("#test2>span").html(result[0]['price']);
$("#test3>span").html(result[0]['price']);