Customizing a Message Based On What Was Clicked - php

Question

I have a div that has some smaller divs inside it. Each small div has its own id, and belongs to a class.
When you click the div, a message pops up that says "Added to cart" (Guess what this is about) and I want to know how to get the value of the text inside a paragraph inside the div that is clicked. I want to do this with PHP, so I can actually make some server changes with the users's cart.
Here is a site for my code (I try to include as little code, but some you may find unnecessary)
http://jsfiddle.net/av3Da/2/
My html:
<div id="shop">
<input type="button" value="Go To Checkout" id="checkoutbutton" />
<div class="shopitem" id="OrangeBG">
<p class="shopitemname">Orange Background Color</p>
<div class="buyinfo">
<p class="buyinfoname">Buy - 40 Coins</p>
</div>
</div>
<div class="shopitem" id="BlackBG">
<p class="shopitemname">Black Background Color</p>
<div class="buyinfo">
<p class="buyinfoname">Buy - 40 Coins</p>
</div>
</div>
<div class="shopitem" id="GreenBG">
<p class="shopitemname">Green Background Color</p>
<div class="buyinfo">
<p class="buyinfoname">Buy - 40 Coins</p>
</div>
</div>
<div class="shopitem" id="BlueBG">
<p class="shopitemname">Blue Background Color</p>
<div class="buyinfo">
<p class="buyinfoname">Buy - 40 Coins</p>
</div>
</div>
<div class="shopitem" id="YellowBG">
<p class="shopitemname">Yellow Background Color</p>
<div class="buyinfo">
<p class="buyinfoname">Buy - 40 Coins</p>
</div>
</div>
<div class="shopitem" id="PurpleBG">
<p class="shopitemname">Purple Background Color</p>
<div class="buyinfo">
<p class="buyinfoname">Buy - 40 Coins</p>
</div>
</div>
</div>
<div id="confirmbox">
<p>The item "<span id="box_item"></span>" was successfully added to your cart</p>
</div>
My javascript:
$(document).ready(function(){
$(".buyinfo")
.click(AddToCart)
.mouseout(popUpVanish);
$('#confirmbox').hide();
});
function AddToCart() {
$('#confirmbox').show('normal');
}
function popUpVanish() {
$('#confirmbox').delay(2000).fadeOut() ;
}
Why do i need to include code with JSFIDDLE?
Everything looks jumbled up, but that's because its on the fiddle site.
So if I wanted to customize the message to say "You bought X Background Color" and then add that to a PHP database, or javascript array?
In addition, I am looking for some advice on how to change the text on the div that says "Buy for 40 coins" into "Added to cart - Click to remove" and so that you click the button again and it removes the item from the cart.
If my question is not good, please don't just rate it down, write a comment and I'll fix!!!!
thanks

Answer 1

I've just tried to achieve the most part you've asked for. But I can't do all for you, you have to try it yourself and if there is a problem you have to ask another specific question.
// Shop Stuff
var cart = [];
$(document).ready(function(){
var buttonTxt = '';
$(".buyinfo").click(function() {
//Store text and id of the selected element
var txt = $(this).siblings('.shopitemname').text();
var id = $(this).closest('.shopitem').attr('id');
if(!$(this).hasClass('added')) {
buttonTxt = $('.buyinfoname', this).text();
$('#box_item').text(txt);
cart[id] = txt;
//Change text
$('.buyinfoname', this).text('Added to cart - Click to remove');
$(this).addClass('added');
//Show and hide overlay
$('#confirmbox').show('normal').delay(2000).fadeOut();
} else {
delete(cart[id]);
$(this).removeClass('added');
$('.buyinfoname', this).text(buttonTxt);
}
console.log(cart);
});
});
Css to hide the overlay by default.
#confirmbox {
display: none;
}
Look at that fiddle to try it. Have a look at the console to see the output and the current state of cart.