替换内容Jquery ajax

Question

Im using .append on each of the data i want to load but i want to change the data in my site for example if i click button1 it will show the name and price of the room, then if i click button2 now it should show the data of the button2 and remove the data from button1 in my site. thats what i want to happen. Right now it only stacks the data of each button when i press that diff buttons Like Single Room 45$ Family Room 49$ it stacks up.. this is my code

$(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');
                        }


                    }
                });
            }


            });
        }); 

Here's the image https://i.stack.imgur.com/0Vh8x.jpg Here is my html code

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

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

The button code

 <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

The problem with append() is that it appends a string to the selector and ads on and on each time you click. You could change your html structure slightly slightly (adding a element) and use html() to show the correct data without overwriting the caption:

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']);