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