clone() is only running once

Question

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 1

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>