JS ajax + append将相同的HTML多次添加到一个元素

我已经通过此JavaScript成功实现了大多数所需的功能，但是仍然有一个潜在的麻烦错误，我无法弄清楚：我编写的代码会附加所需的HTML，但会创建不必要的重复项。

问题

该代码会多次添加按钮，而只应添加一次。如何停止倍数？

第（li）个项目以ul的形式显示，就像这样的表格（编号是任意的，我仅将其用作参考）：

| 1 | 2 |
| 3 | 4 |
| 5 | 6 |

• 它给出清单4、1个按钮
• 它给出清单1，2个按钮
• 它给出清单2、3按钮

它是从右到左从上到下吗？如果是这样，为什么？

我试图完成的任务：

第1阶段-检查视频，如果有视频，则添加按钮

1. 检查此类别页面上的产品列表，看看是否有“ .Options”
2. 如果它们具有.Options，请检查/ Videos /文件夹中是否存在与该产品ID匹配的视频
3. 如果视频文件夹中存在具有匹配产品ID的视频，请将“播放/停止”切换按钮附加到产品列表中

第2阶段-按下按钮即可播放/停止视频

4. 如果按下了“播放/停止”按钮，请添加带有相关视频网址的标签
5. 如果正在播放视频，请在按下按钮时停止并隐藏视频

JavaScript

    $('.videoDemoBtn').on('click', function () {
    if ($(this).hasClass('videoPlaying')) {
        $(this).removeClass('videoPlaying');
        $(this).parent().find('div.categoryDemoVideo').hide().html('');
        }
        else {
            var ProductId = $(this).parent().find('div.ProductImage').attr('data-product');
            $(this).addClass('videoPlaying');
            $(this).parent().find('div.categoryDemoVideo').show().html('<video id="demoVideo" class="video" preload="auto" autoplay="autoplay" loop="loop" autobuffer="autobuffer" muted="muted" controls="controls" width="100%" height="100%" poster="https://store-mixi7d.mybigcommerce.com/content/videos/'+ProductId+'.jpg"><source src="https://store-mixi7d.mybigcommerce.com/content/videos/'+ProductId+'.mp4"><source src="https://store-mixi7d.mybigcommerce.com/content/videos/'+ProductId+'.ogv" type="video/ogg"><p>Your browser does not support this video.  Please upgrade your browser!</p></video>');
                    }
            });
    $(".Options").each(function checkForVideo(url) {
    var ProductCatOpt = $(this);
        ProductId = $(this).parent().parent().find('div.ProductImage').attr('data-product');
    function ajax1() {
        return $.ajax('/content/videos/'+ProductId+'.mp4')
            .done(function() { 
                $(ProductCatOpt).addClass('withVideo');
            }).fail(function() { 
                return;
            });
        }
        $.when(ajax1()).done(function(a1){
            $('.withVideo').closest('li').append('<span class="videoDemoBtn"><div class="triangle"></div></span>');
       });
    });

HTML

    <ul class="ProductList " style="position: relative; height: 1407px;">
        <li class="Odd " style="min-height: 456px; position: absolute; left: 0px; top: 0px;">
            <div class="ProductImage QuickView" data-product="296"> 
                <div class="categoryDemoVideo"></div>
            </div>
            <div class="ProductActionAdd" style="display:;"> 

                <a href="#someproduct" class="btn Small icon-Choose Options withVideo" title="Choose Options">Choose Options</a></div>

            <!-- Here in the first listing in the ul with class .Options it creates 2 buttons -->               
            <span class="videoDemoBtn"><div class="triangle"></div></span>
            <span class="videoDemoBtn"><div class="triangle"></div></span>
            <!-- Here in the first listing in the ul with class .Options it creates 2 buttons -->               

        </li>
        <li class="Even " style="min-height: 456px; position: absolute; left: 310px; top: 0px;">
            <div class="ProductImage QuickView" data-product="431"> 
                <div class="categoryDemoVideo"></div>
            </div>
            <div class="ProductActionAdd" style="display:;"> 

                <a href="#someproduct" class="btn Small icon-Choose Options withVideo" title="Choose Options">Choose Options</a></div>

            <!-- While here in the 2nd to last listing in the ul with class .Options it creates 3 buttons -->               
           <span class="videoDemoBtn"><div class="triangle"></div></span>
           <span class="videoDemoBtn"><div class="triangle"></div></span>
           <span class="videoDemoBtn"><div class="triangle"></div></span>
            <!-- While here in the 2nd to last listing in the ul with class .Options it creates 3 buttons -->               

        </li>
        <li class="Odd " style="min-height: 435px; position: absolute; left: 0px; top: 476px;">
            <div class="ProductImage QuickView" data-product="389">         
                <div class="categoryDemoVideo"></div>
            </div>
            <div class="ProductActionAdd" style="display:;"> 
                <a href="#someproduct" class="btn Small icon-Add To Cart" title="Add To Cart">Add To Cart</a></div>
        </li>
        <li class="Even " style="min-height: 435px; position: absolute; left: 310px; top: 476px;">
            <div class="ProductImage QuickView" data-product="393"> 
                <div class="categoryDemoVideo"></div>
            </div>
            <div class="ProductActionAdd" style="display:;"> 

                <a href="#someproduct" class="btn Small icon-Choose Options withVideo" title="Choose Options">Choose Options</a></div>

            <!-- And yet ere in the last listing in the ul with class .Options it creates just 1 button -->               
            <span class="videoDemoBtn"><div class="triangle"></div></span>
            <!-- And yet ere in the last listing in the ul with class .Options it creates just 1 button -->               

       </li>
        <li class="Odd " style="min-height: 456px; position: absolute; left: 0px; top: 931px;">
            <div class="ProductImage QuickView" data-product="428"> 
                <div class="categoryDemoVideo"></div>
            </div>
            <div class="ProductActionAdd" style="display:;"> 
                <a href="#someproduct" class="btn Small icon-Add To Cart" title="Add To Cart">Add To Cart</a></div>
        </li>
        <li class="Even " style="min-height: 456px; position: absolute; left: 310px; top: 931px;">
            <div class="ProductImage QuickView" data-product="388">         
                <div class="categoryDemoVideo"></div>
            </div>
            <div class="ProductActionAdd" style="display:;"> 
                <a href="#someproduct" class="btn Small icon-Add To Cart" title="Add To Cart">Add To Cart</a></div>
        </li>
    </ul>

我在这里做了一个JSFiddle，但这没有帮助，因为必须使用ajax检查的视频必须在同一域中才能正常工作，并且ProductID由我使用的平台的PHP动态生成。

我特别希望停止导致附加多个按钮而不是仅附加1个按钮的行为，但是，如果我的代码草率且效率低下，我不会感到惊讶，因此，请随时批评其中的任何部分。