CODEWITHSUNDEEP
javascriptjqueryhtmldom
DasSaffe
DasSaffe

Reputation: 2198

jquery clone add class only to cloned element

I have a simple function which clones an element and fills it with values:

// Simple function to fadeIn a preview-text as soon as all inputs are triggered
function checkShowPreviewOrder() {
    $('.clonable').hide();
    $('.menge').each(function(i, val) {
            // check if the input is validate
            var currentVal = $(this).val();
            if(currentVal > 0 && isNumeric(currentVal)) {

                // clone the cloneable object for each valid number
                $('.cloneable').clone().appendTo(".summaryList").addClass("cloned"+i).show();

                // fill in initial values               
                $('.cloned'+i+' .preview_menge_einheit').html(currentVal);
                $('.cloned'+i+' .preview_artikel_name').html($(this).closest("tr").find(".item_name").text());
                $('.cloned'+i+' .preview_price_unit').html($(this).closest("tr").find(".price_ve").text());
                $('.cloned'+i+' .preview_einheiten').html(currentVal * $(this).closest("tr").find(".item_amount_unit").text());
            }
    });

    $('.previewtext').fadeIn();
}

This here is my div, where the text should be appended 

<div class="alert alert-warning">
    <strong>Bitte überprüfen ob folgende Angaben korrekt sind:</strong><br><br>
    Sie bestellen folgende Artikel:
    <div class="summaryList">

    </div>
    <br>
    <hr>
    Der finale Preis beläuft sich auf <span class="preview_preis"></span>€
</div>

And at the very bottom, I have my skelleton which should be cloned:

<!-- HTML Template to copy from -->
<div class="cloneable" style="display: none;">
    <span class="preview_menge_einheit"></span>
    <span class="preview_artikel_name"></span>
    <span>zu je</span>
    <span class="preview_price_unit"></span>€ pro VE.
    <br>
    Dies entspricht einer Gesamtanzahl von <span class="preview_einheiten">
</span> Stück.
</div>

What I want to achieve is this: I have n amounts of input-fields. For each of this input-field, I want to have a small summary with the items (prices, amount..) for a quick overview in the end. My table looks like this (just in case you need it visualized)

enter image description here

I get that adding a class to the "clonable"-object is the mistake, but I don't know how to access only the cloned object and leave the original untouched. Right now, my dom ends up like this (with 3 inputs filled):

enter image description here

So I end up with 7 (instead of 3) copies

Upvotes: 0

Views: 1531

Answers (1)

Tanmay
Tanmay

Reputation: 1165

Instead of cloning clonable just create dummy variable which will hold contents of clonable.

So, Instead of following,

$('.cloneable').clone().appendTo(".summaryList").addClass("cloned"+i).show();

You can try this,

var $clone = $("<div>" + $('.cloneable').html() + "</div>");
 $clone.appendTo(".summaryList").addClass("cloned"+i).show();

Or 

$('.cloneable').clone().appendTo(".summaryList").removeClass("cloneable").addClass("cloned"+i).show();

Upvotes: 1

Related Questions