Javascript 将按钮添加到新元素

你能帮我解决一个小问题吗

我有一些数字。单击后，所选地物将复制到另一个div（basket）。 篮子中应出现新按钮。但在我的解决方案中，这个按钮在每次单击后都会再次出现。 我怎样才能解决这个问题？ 谢谢你，对不起我的英语

此代码

<div class="products__list__items">
    <div class="products__list__item row">
        <figure class="product first" data-class="first">
            <img src="https://www.tineye.com/images/robot-search-header.png" alt="product1" class="product__img">
            <figcaption class="product__title">One</figcaption>
        </figure>
    </div>
    <div class="products__list__item row">
        <figure class="product first" data-class="first">
            <img src="https://www.tineye.com/images/robot-search-header.png" alt="product1" class="product__img">
            <figcaption class="product__title">Two</figcaption>
        </figure>
    </div>
    <div class="products__list__item row">
        <figure class="product first" data-class="first">
            <img src="https://www.tineye.com/images/robot-search-header.png" alt="product1" class="product__img">
            <figcaption class="product__title">Three</figcaption>
        </figure>
    </div>          
</div>
<div class="basket">

</div>

一个
两个
三

Jquery代码

$(document).ready(function() {
    var addToBasket = function() {
        var that = $(this);
        if(!that.hasClass('added')) {
            that.clone().appendTo($('.basket'));
            that.addClass('added');
        };  
        $('.basket .product').append('<button>x</button>');
    };
    $(document).on("click",".products__list__item .product",addToBasket);
});

$（文档）.ready（函数（）{
var addToBasket=函数（）{
var，该值=$（此值）；
如果（！that.hasClass（'added'））{
that.clone（）.appendTo（$（'.basket'））；
addClass（'added'）；
};  
$（'.basket.product'）。追加（'x'）；
};
$（文档）。在（“单击“，”.products\uuuuu list\uuuuu item.product”，addToBasket）；
});

这里拉小提琴

---

每个产品只能添加一次按钮

var addToBasket = function() {
    var that = $(this);
    if(!that.hasClass('added')) {
        //Append the button here
        that.clone().add('<button>x</button>').appendTo($('.basket'));
        //Or
        //that.clone().append('<button>x</button>').appendTo($('.basket'));
        that.addClass('added');
    };  
    //Following statement is not required
    //$('.basket .product').append('<button>x</button>');       
};

var addToBasket=function（）{
var，该值=$（此值）；
如果（！that.hasClass（'added'））{
//在这里添加按钮
that.clone（）.add（'x'）.appendTo（$（'.basket'））；
//或
//that.clone（）.append（'x'）.appendTo（$（'.basket'））；
addClass（'added'）；
};  
//以下声明不是必需的
//$（'.basket.product'）。追加（'x'）；
};

---

是否需要添加按钮？是否只添加一次按钮？如果是这样，您可以使用JQuery的

.one（）

（类似于

.on（）

，但每个元素只执行一次）谢谢！！这对我帮助很大！