Appendto is not a Function/Shopping Cart using jQuery

Question

Hello

I’m doing my first online store project but I’m missing some tasks that I don’t know how to solve right now. Below is what I need to do:

• How to show the cart (which will be hidden) when the first item is inserted? And how to hide it again when there are no items?
• At the moment I can insert an item but once I press another, it is simply replaced. How to add an item without removing what is already there? I will also have to generate new HTML elements to package each new item in the cart?
• How to increase/decrease the number in the input box?

• How do I show the price in the €14.35 format instead of €14.3546567?

  However I did a jsfiddle to show the problem:

Cart

HTML

<main>
  <section id="is-shopContainer">
<article id="section-shop">
  <h2>Online Shop</h2>
  <p>Articles available.</p>      
  <ol>
    <li>
      <div>
        <h3>FlipFlops</h3>
        <p>Beach shoes.</p>
      </div>
      <footer>
        <p>&euro;5</p>
        <button data-shop-listing='{"name": "FlipFlops", "description": "FlipFlops", "price": 5.00}'>Add to cart</button>
      </footer>
    </li>
    <li>
      <div>
        <h3>Raquet</h3>
        <p>Play it</p>
      </div>
      <footer>
        <p>&euro;12.99</p>
        <button data-shop-listing='{"name": "Raquet", "description": "Play the Raquet", "price": 12.99}'>Add to cart</button>
      </footer>
    </li>
    <li>
      <div>
        <h3>Balls</h3>
        <p>Raquet balls.</p>
      </div>
      <footer>
        <p>&euro;9.99</p>
        <button data-shop-listing='{"name": "Balls", "description": "Balls.", "price": 9.99}'>Add to cart</button>
      </footer>
    </li>
    <li>
      <div>
        <h3>Buoy</h3>
        <p>A buoy</p>
      </div>
      <footer>
        <p>&euro;2.50</p>
        <button data-shop-listing='{"name": "Buoy", "description": "A buoy", "price": 5.50}'>Add to cart</button>
      </footer>
    </li>
  </ol>
</article>
  </section>
<article id="section-shoppingcart">
  <h2>Your shopping cart</h2>
  <p>&hellip;is empty.</p>
  <form id="shoppingcart-form">
    <table>
      <thead>
        <tr>
          <th>Product</th>
          <th>Price</th>
          <th>Quantity</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <h3></h3>
            <p></p>
            <div>
              <button>Remove</button>
            </div>
          </td>
          <td>
            <output></output>
          </td>
          <td>
            <input type="number" min="1" value="1">
            <span>
            <button type="button" aria-label="decrease">
            -
            </button>
            <button type="button" aria-label="step up">
            +
            </button>
            </span>
          </td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="3">
            <ol>
              <li>
                <label>Price before <abbr title="Value Added Tax">VAT</abbr>:</label>
                <output></output>
              </li>
              <li>
                <label><abbr title="Value Added Tax">VAT</abbr> @ <strong>20</strong>%:</label>
                <output></output>
              </li>
              <li>
                <label>Total to be paid:</label>
                <output></output>
              </li>
            </ol>
          </td>
        </tr>
      </tfoot>
    </table>
    <footer>
      <p>            
      </p>
      <a href="#"></a> <button type="submit" form="shoppingcart-form">Proceed to Checkout</button>
    </footer>
  </form>
</article>

jQuery

$(document).ready(function(){

//add items to cart
var itemData = $('#section-shop button').each(function(){
        var productName = $(this).data('shop-listing').name;
        var productDescription = $(this).data('shop-listing').description;
        var productPrice = $(this).data('shop-listing').price; 

        console.log(productName);
        console.log(productDescription);
        console.log(productPrice);

$(this).on('click', function(product, description, price){                         
       $('#shoppingcart-form tbody tr td h3').text(productName);
       $('#shoppingcart-form tbody tr td p').text(productDescription);
       $('#shoppingcart-form output').text('€'+ productPrice);

        //get input label to increase/decrease number
        var inp = $('#shoppingcart-form tbody tr td:last-child 
input').val();

        //increase/decrease price
        var totalPrice = productPrice;
        $('#shoppingcart-form tfoot ol li:first-child 
output').text(totalPrice);

        if($('#shoppingcart-form tbody button:first-child').click(function()
{
            price++;
            totalPrice++;
            inp++;
        }));            

        if($('#shoppingcart-form tbody button:last-child').click(function(){
            price--;
            totalPrice--;
            inp--;
        }));

        //add VAT
        var VAT = 20/100 * totalPrice;
        $('#shoppingcart-form tfoot ol li:nth-child(2) output').text('€' + 
VAT);

        //Total Price with VAT
        var total = VAT + totalPrice;

        //print total price
        $('#shoppingcart-form tfoot ol li:last-child output').text('€' + 
total);        
});
});

//show/hide shopping cart when first item is choosen or is empty
 var shoppingCart = $('#section-shoppingcart');

if(shoppingCart.length > 0) {
   $(this).css('opacity', 1);
} else {
   $(this).css('opacity', 0);
}

//remove items from the cart
$('#shoppingcart-form tbody tr td:first-child div button').on('click', function() {
   $(this).remove(itemData); 
});
console.log(itemData);

//Checkout button inactive
$('#shoppingcart-form footer button').on('click', function(e){
    e.preventDefault();
    $(this).attr('disabled', 'disabled').prop('disabled', true).css('opacity', '0.5');
   $(this).text('Sending your order');        
});
});

I appreciate the help.

Answer 1

The function $.fn.appendTo is intended not for strings, but for elemntos, example:

<ul id="lista">
</ul>

//busca ul
const $lista = $( 'ul#lista' );

//Cria <li> e adicona na <ul>
$( '<li>' ).appendTo( $lista ); 

So instead of using appendTo, use text which is to define the text of an element:

$( '#shoppingcart-form tbody tr td h3' ).text( productName );