从PHP生成List添加项目到不同的div（使用/ jQuery + AJAX）

Question

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.

Answer 1

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));
    }
});