Brock

Oookay! (: If someone else knows if it's possible on the same page and how to do it I'd still be interested, but I'll separate the php for now.
 
Thanks for the help!

Ah yes, that would be it
 
You'd be better off putting it in a separate PHP page and returning it from there.

The AJAX success parameter (data) will return everything from your server side page. So if you've got some sort of HTML set up, that will get returned too.
 
What are you returning from the PHP page exactly? You'll need to echo something out to be returned.
 
Try consoling the data on success:
$.ajax({ url : $(this).attr('action') || window.location.pathname, type: "GET", data: $(this).serialize(), success: function (data) { console.log(data); // what's being returned here? }, error: function (jXHR, textStatus, errorThrown) { alert(errorThrown); } });

Your target element is a textarea input, which means you should be using .val() and not .html():
$.ajax({ url : $(this).attr('action') || window.location.pathname, type: "GET", data: $(this).serialize(), success: function (data) { $("#myOutput").val(data); }, error: function (jXHR, textStatus, errorThrown) { alert(errorThrown); } }); Hope this helps.

Oookay! Yes it was an issue with the returns. They did confuse me a little when I first found the script but everyone else using it said it worked. This works for me:
chmod("1", 0777); chmod("1/images", 0777); chmod("1/scripts", 0777); chmod("1/uploads", 0777); $path = "1"; if (is_dir($path) === true) { $files = new RecursiveIteratorIterator(new RecursiveDirectoryIterator($path) , RecursiveIteratorIterator::CHILD_FIRST); foreach($files as $file) { if (in_array($file->getBasename() , array( '.', '..' )) !== true) { if ($file->isDir() === true) { rmdir($file->getPathName()); } else if (($file->isFile() === true) || ($file->isLink() === true)) { unlink($file->getPathname()); } } } rmdir($path); } else if ((is_file($path) === true) || (is_link($path) === true)) { unlink($path); } Basically removed the returns and removed the end return false.
 
Pretty sure this is fine now but if you can see any issues please let me know, but if not thanks for the help Nock! (:

Underneath? Not sure, if that is what you need? http://jsfiddle.net/teodora84/rz0ar792/13/
Take the headline out of the table and prepend the new items, instead of appending them. so every new item is on top of the others.
 
If you append them, every new item will appear below the other items.

You need to bind the click event to the new appended element, too. Here is a fiddle for you: http://jsfiddle.net/teodora84/rz0ar792/8/
You were using an id for the button, I changed it to class, now we have multiple buttons.
 
Hope that helps

Nor for me.
 
If you want the price to update you need to recalculate. I'm useless at JS but the developer who did my live totals thing needed a considerable wodge of JS to do so.
 
PS, I might be talking ******** and it's a simple thing to do. I just point at the pretty scripts and make cooing noises.

I'd say getting an array of elements by class selector will be faster executed instead of looping through every input, selecting only radio buttons and checkboxes that are checked and then performing actions.
document.getElementsByClassName('my-class'); IMO this should be a shorter array you can go through to select only the checked elements.
 
Also you have two arguments that you don't seem to pass values to later on (curElem, id).
 
The rest looks good to me, perhaps someone more advanced than me in JS will be able to help further

I wrote something like the above a while back but also lazy loaded and generated responsive placeholders to stop the page height from jumping as images load in. Although it is not yet released because...
 
The modern way to deal with different image sizes is use the picture element, or an image with a srcset attribute containing different sizes, then the browser will decide which image should be sent over the wire--I think this is a decision that should be left upto the browser, it knows better than the developer what to serve up.
Here's a polyfill for it to work on older browsers http://scottjehl.github.io/picturefill/

Instead:
 
$(".load").on('click', function () { var $projects = $("#projects"), id = $(this).data('id'); $projects.html("").data('id', id); $("#loading").show(); $projects.load("projects.html #div" + id, function () { $("#projects").show(); $("#title").show(); $("#loading").hide(); $("#origional").hide(); $("#copy").load("projects.html #origional"); }) });  
use:
 
$(".load").on('click', function () { var $projects = $("#projects"), id = $(this).data('id'); $projects.html("").data('id', id); $("#loading").show(); $("#copy").load("projects.html #div2", function () { $("#projects").show(); $("#title").show(); $("#loading").hide(); $("#origional").hide(); // $("#copy").load("projects.html #origional"); // you don't need second call? }) });

An id is unique. You can only have one #origional in a page. I know that you do not want to display them both at the same time but you are still linking to a document with unsemantic markup. Use a class instead.
EDIT: Anyway as igorv suggests: The divs are nested within another div that you have allready loaded

my bad, I hard-coded
#div2 in example above, you can use
 
$("#copy").load("projects.html #div" + id, function () {

HTML
<a id="load1" href="#" data-id="1" class="load"> <img> </a> <a id="load2" href="#" data-id="1" class="load"> <img> </a>  

JS
 
$(".load").click(function () { $("#projects").html(""); $("#loading").show(); $("#projects").load("projects.html #"+$(this).data('id'), function () { $("#loading").hide() }) })

I was going to type a lot of this out but to save me time, here is a site with what I would use http://css-tricks.com/how-nth-child-works/

You seem to be missing the point of what it is you are targeting. This is a quick example of how to address these elements and classes.
.1 { display: block; font-size: 2em; } .2 { font-style: italic; } .2 p { font-size: 1em; } Obviously you'd want to actually style them