dannyzaplings dannyzaplings - 27 days ago 11
jQuery Question

clone() is only running once

I'm trying to add multiple product categories when "Add product" is clicked. I want the new product select box to remove the previously selected product category. I have this working for the first time the button is clicked, but it won't work a second or third time. Thanks for taking a look.

JSFiddle

HTML

<div id="products">
<div id="product-row-1" class="row">
<div class="small-6 columns">
<select id="product-category-1" name="product-category-1" class="text">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
<option value="d">d</option>
</select>
</div>

<div class="small-6 columns">
<input type="number" step="0.01" min="0.01" class="text" name="product_amount-1" id="product-amount-1" placeholder="$$$" />
</div>
</div>
</div>

<div class="center row">
<button id="add-product">Add item</button>
</div>


JS

$(document).ready(function(){
var num = 1;
$('#add-product').click(function(){

var selVal = $('#product-category-'+num+'').val();
var clone = $('#product-row-'+num+'').clone();

$('#products').append(clone);

num++;

clone.attr("id", '#product-row-'+num+'');
clone.find('select').attr("id", 'product-category-'+num+'').attr("name", 'product-category-'+num+'');
clone.find('input').attr("id", 'product-amount-'+num+'').attr("name", 'product-amount-'+num+'');

$('#product-category-'+num+'').find("option[value='"+selVal+"']").remove();

return false;
});
});

Answer

When you update the ID of the cloned row, you keep the hash

clone.attr("id", '#product-row-' + num + '');

you have to remove the hash, otherwise you set the ID with the hash

clone.attr("id", 'product-row-' + num + '');

$(document).ready(function() {
    var num = 1;
    $('#add-product').click(function() {

        var selVal = $('#product-category-' + num + '').val();
        var clone = $('#product-row-' + num + '').clone();
        $('#products').append(clone);

        num++;

        clone.attr("id", 'product-row-' + num + '');
        clone.find('select').attr("id", 'product-category-' + num + '').attr("name", 'product-category-' + num + '');
        clone.find('input').attr("id", 'product-amount-' + num + '').attr("name", 'product-amount-' + num + '');

        $('#product-category-' + num + '').find("option[value='" + selVal + "']").remove();
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="products">
    <div id="product-row-1" class="row">
        <div class="small-6 columns">
            <select id="product-category-1" name="product-category-1" class="text">
                <option value="a">a</option>
                <option value="b">b</option>
                <option value="c">c</option>
                <option value="d">d</option>
            </select>
        </div>

        <div class="small-6 columns">
            <input type="number" step="0.01" min="0.01" class="text" name="product_amount-1" id="product-amount-1" placeholder="$$$" />
        </div>
    </div>
</div>

<div class="center row">
    <button id="add-product">Add item</button>
</div>