Jquery .clone() only works once

Question

I'm building a menu ordering app where I have to use Jquery.

I'm using the clone() method to duplicate cart items with the necessary data ejected in. It works once, and then logs and empty object with a <prototype> .

What I am cloning is a section in my HTML I am using as a template with an id to keep it hidden. I remove this on the cloned items.

The ejecting of the data I have excluded as it is working fine and the functions are in other files, but I am open to the idea of them being the cause.

HTML:

        <div class="cart-item" id="cartitem-template">

          <div class="left">
            <div class="image"></div>
            <div class="price"></div>
          </div>

          <div class="mid">
            <div class="name">

            </div>
            <div class="stars">
              <span></span>
            </div>
            <div class="underline"></div>
            <div class="toggleReviews">
              <span></span>
            </div>
          </div>

          <div class="right">
            <div class="remove-cart-item">✕</div>
          </div>

        </div>

      </div>

The JS function:

    buildCartItem = function(menuItem) {
        const template = $("#cartitem-template")

        template
            .removeAttr("id")
            .clone(false)

        const newCartItem = template
        newCartItem.insertAfter(".cart-item")
        console.log(newCartItem)

        //Get object and index atts from clicked menu item
        //Also set that same data into the dom of the cart item
        //As well as set that data to local storage

        ...

        // Apply data to the cloned cart item template
        newCartItem.find(".image").css("background-image", "url(" + data.image + ")")
        setData(".price", "$"+data.price, newCartItem)
        ...
    }

    $(".menu-item").click(function() {
        buildCartItem($(this))
    })

I'm I using .clone() correctly? Honestly stuck

Answer 1

You are removing the attribute "id" from the source element even before cloning, That's why in the subsequent method invocations it could not find an element with the id "cartitem-template". So in your method buildCartItem, remove "id" after cloning.

const newCartItem = template.clone(false).removeAttr("id");

Answer 2

 var buildCartItem = function(menuItem) { const newCartItem = $("#cartitem-template").clone(false).removeAttr("id"); //newCartItem.find(".image").css("background-image", "url(" + data.image + ")"); //setData(".price", "$" + data.price, newCartItem); newCartItem.insertAfter("#cartitem-template"); } $(".menu-item").click(function() { buildCartItem($(this)) })

 #cartitem-template { display: none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="cart-item" id="cartitem-template"> <div class="left"> <div class="image">image</div> <div class="price">price</div> </div> <div class="mid"> <div class="name">name </div> <div class="stars"> <span>0</span> </div> <div class="underline"></div> <div class="toggleReviews"> <span></span> </div> </div> <div class="right"> <div class="remove-cart-item">✕</div> </div> </div> <button class="menu-item">Clone</button>

Answer 3

i had similar problem and i solved using function:

function getClone(){

    return $(myCloningDiv).clone()

}