I have little experience with AJAX and jQuery so apologize if this seems trivial.
I have a list of ingredients that are generated from a DB via PHP foreach loop:
<div class="pure-u-1 pure-u-md-2-5 pure-u-lg-2-5 content-left">
<div id="scroll" class="card">
<a href="javascript:showhide('green')"><h2 class="is-center">green</h2></a>
<ul id="greens" class="card-content-ingredients" style="list-style-type: none;">
<?php
foreach ($greens as $green) {
echo "<li>";
echo "<span class='item-name-small'>" . $green['name'] . "</span>";
echo "<span class='item-description-menu'>" . $green['description'] . "</span>";
echo "<span class='content-right'>";
echo "<a class='minus increment' href='#'> - </a>";
echo "<input class='quantity' type='text' size='1' id='" . $green['id'] . "' name='" . $green['id'] . "' value='0'>";
echo "<a class='plus increment' href='#'> + </a>";
echo "</span>";
echo "</li>";
echo "</br>";
}?>
</ul>
<a href="javascript:showhide('essentials')"><h2 class="is-center">essentials</h2></a>
<ul id="essentials" class="card-content-ingredients" style="list-style-type: none;">
<?php
foreach ($essentials as $essential) {
if (($essential['subtype'] == "veggies") || ($essential['subtype'] == "fruit")) {
echo "<li>";
echo "<span class='item-name-small'>" . $essential['name'] . " </span>";
echo "<span class='item-description-menu'> " . $essential['description'] . "</span>";
echo "<span class='content-right'>";
echo "<a class='minus increment' href='#'> - </a>";
echo "<input class='quantity' type='text' size='1' id='" . $essential['id'] . "' name='" . $essential['id'] . "' value='0'>";
echo "<a class='plus increment' href='#'> + </a>";
echo "</span>";
echo "</li>";
echo "</br>";
}
}?>
</ul>
<a href="javascript:showhide('crunch')"><h2 class="is-center">crunch</h2></a>
<ul id="crunch" class="card-content-ingredients" style="list-style-type: none;">
<?php
foreach ($essentials as $essential) {
if (($essential['subtype'] == "crunch")) {
echo "<li>";
echo "<span class='item-name-small'>" . $essential['name'] . " </span>";
echo "<span class='item-description-menu'> " . $essential['description'] . "</span>";
echo "<span class='content-right'>";
echo "<a class='minus increment' href='#'> - </a>";
echo "<input class='quantity' type='text' size='1' id='" . $essential['id'] . "' name='" . $essential['id'] . "' value='0'>";
echo "<a class='plus increment' href='#'> + </a>";
echo "</span>";
echo "</li>";
echo "</br>";
}
}?>
</ul>
<a href="javascript:showhide('grains')"><h2 class="is-center">grains</h2></a>
<ul id="grains" class="card-content-ingredients" style="list-style-type: none;">
<?php
foreach ($essentials as $essential) {
if (($essential['subtype'] == "grains")) {
echo "<li>";
echo "<span class='item-name-small'>" . $essential['name'] . " </span>";
echo "<span class='item-description-menu'> " . $essential['description'] . "</span>";
echo "<span class='content-right'>";
echo "<a class='minus increment' href='#'> - </a>";
echo "<input class='quantity' type='text' size='1' id='" . $essential['id'] . "' name='" . $essential['id'] . "' value='0'>";
echo "<a class='plus increment' href='#'> + </a>";
echo "</span>";
echo "</li>";
echo "</br>";
}
}?>
</ul>
</div> <!-- END CARD -->
</div> <!-- END ESSENTIALS -->
Currently, I have it that next to each ingredient, a - and + appear next to a text input. What I'm trying to do is change the code that when a customer clicks on each individual item, it is added to a different div that has a summary of their order. The second div is on the same page as the item list.
If you just want to copy the list item to a different div you can do it like this:
$(function (){
$('ul.card-content-ingredients li').click(function(){
$('#new-div-id ul').append($(this));
}
});