CODEWITHSUNDEEP
javascriptjquery
Reynier
Reynier

Reputation: 2478

Clone INPUT element just after his equal an inside the right DIV

I have this HTML:

{% for entity in items %}
    <input type="checkbox" name="{{ entity.getLabel|lower }}" id="{{ entity.getLabel|lower ~ "_choice" }}" value="{{ entity.getId }}" /> {{ entity.getLabel }}
{% endfor %}

{% for entity in items %}
    <div id="{{ entity.getLabel|lower ~ "_choice_" ~ entity.getId }}" style="display: none">
        <button type="button" class="{{ entity.getLabel|lower }}">Adicionar {{ entity.getLabel|lower }}</button>
    </div>
{% endfor %}

<button type="button" class="create-variation" id="create-variation" style="display: none">{{'Crear variaciones'|trans}}</button>

<section id="variations_holder" style="display: none"></section>

And this is how it looks when it's rendered:

    <div style="" id="talla_choice_24">
        <span>Talla<input placeholder="Talla" value="" data-id="talla_24" name="input_talla[]"></span>
        <br>
        <button class="talla" type="button">Adicionar talla</button>
    </div>
    <div style="" id="color_choice_25">
        <span>Color<input placeholder="Color" value="" data-id="color_25" name="input_color[]"></span>
        <br>
        <button class="color" type="button">Adicionar color</button>
    </div>

For first time I create a input as follow:

$('#choices').on("change", ":checkbox", function(e) {
    var theName = $(this).attr('name');
    var theID = $(this).attr('value');
    var hasChecked = $(this).is('checked').length;
    var input = "";

    input = '<span>' + capitalize(theName) + '<input name="input_' + theName + '[]" data-id="' + theName + '_' + theID + '" value="" placeholder="' + capitalize(theName) + '" /></span><br/>';

    if ($(this).is(":checked")) {
        $("#" + theName + '_choice_' + theID).find(':button').before(input);
        $("#" + theName + '_choice_' + theID).show();
    } else {
        $("#" + theName + '_choice_' + theID).find(':not(button)').remove();
        $("#" + theName + '_choice_' + theID).hide();
    }
});

This code works right, what I'm needing now is to clone each input element based on the button I made click. For example, less said I click the button "button#talla" then I should clone the element:

<span>Talla<input placeholder="Talla" value="" data-id="talla_24" name="input_talla[]"></span><br>

In the other hand if I click "button#color" then what I should clone is:

<span>Color<input placeholder="Color" value="" data-id="color_25" name="input_color[]"></span><br>

Of course the code should work with first template approach not with generated code since it's dynamically. I'm working on this:

$("#choices").on("click", ":button", function(e) {
    var class_name = $(this).attr('class');
    var theID = $(this).attr('value');
    $("#" + class_name + "_choice span:last").clone().attr("id", theID).before("button." + class_name);
});

But doesn't work since it not clones and does anything, can any give me a hand on this?

PS: There are some Twig tags and values but forget about them since they set values correctly

Upvotes: 0

Views: 80

Answers (1)

Bergi
Bergi

Reputation: 664287

what I need to get is the class of the parent DIV in order to clone the latest input on it

No, actually you don't even need this. You just need to access the parent div, regardless of its class - use the parent traversal method on the button that was clicked:

$("#choices").on("click", ":button", function(e) {
    $(this).parent().find("span:last").clone().insertBefore(this);
});

Btw, the button has no value and the spans or inputs no id so I'm not sure what you tried to do with theID.

Upvotes: 1

Related Questions