Please tell me how to add and delete jquery elements.

functional requirements are shown in the figure above, but many methods have been tried but can"t be solved. I"d like to ask you for guidance

here is the html code
< div class= "bigBox" >

<div class="box">
    <div class="sbox">
        <select name="op0-0" id="">
            <option value="="></option>
            <option value="!="></option>
        </select>
        <select name="tag0-0" id="select">
            <volist name="arr" id="vo">
                <volist name="vo" id="vo">
                    <option  value="{$vo.TagId},{$vo.TagKey}">{$vo.TagName}___{$vo.TagDataDefine}</option>
                </volist>
            </volist>
        </select>
        <select name="inperate0-0" id="" style="visibility :hidden">
            <option value=""></option>
        </select>
        <a href="-sharp-sharp" class="add">+</a>
        <a href="-sharp-sharp" class="del">-</a>

    </div>
    <a href="-sharp-sharp" class="addall">+</a>
    <a href="-sharp-sharp" class="delall">-</a>
</div>

< / div >

js Code:
< script >

//
$(function(){
    $(document).on("click",".add",function(){
        let colIndex = $(this).parent().find("select[name^="op"]").length
        let rowIndex = $(this).parent().parent().index()
        var value=`<select name="inperate`+rowIndex+`-`+colIndex+`" id="inOperate">
        <option value="AND"></option>
        <option value="OR"></option>
        </select>
        <select name="op`+rowIndex+`-`+colIndex+`" id="op">
        <option value="="></option>
        <option value="!="></option>
        </select>
        <select name="tag`+rowIndex+`-`+colIndex+`" id="tag">
        <volist name="arr" id="vo">
        <volist name="vo" id="vo">
        <option  value="{$vo.TagId},{$vo.TagKey}">{$vo.TagName}___{$vo.TagDataDefine}</option>
    </volist>
    </volist>
    </select>
    <a href="-sharp-sharp" class="add">+</a>
    <a href="-sharp-sharp" class="del">-</a>`;

    $(this).parent().append(value);
})
});


//
$(function(){
    $(document).on("click",".del",function(){

    })
});

//
$(function(){
    $(document).on("click",".delall",function(){

    })
});


//
$(function(){
    let a = 0;
    let b = 0;
    $(document).on("click",".addall",function(){
        let b = $(".bigBox").children().length;
        var v=`<div class="box">
        <div>
        <select name="Operate`+b+`-`+a+`" id="">
        <option value="AND"></option>
        <option value="OR"></option>
        </select>
        <select name="op`+b+`-`+a+`" id="">
        <option value="="></option>
        <option value="!="></option>
        </select>
        <select name="tag`+b+`-`+a+`" id="select">
        <volist name="arr" id="vo">
        <volist name="vo" id="vo">
        <option  value="{$vo.TagId},{$vo.TagKey}">{$vo.TagName}___{$vo.TagDataDefine}</option>
    </volist>
    </volist>
    </select>
    </select>
    <select name="inperate`+b+`-`+a+`" id="" style="visibility :hidden">
    <option value=""></option>
    </select>
    <a href="-sharp-sharp" class="add">+</a>
    <a href="-sharp-sharp" class="del">-</a>
    </div>
    <a href="-sharp-sharp" class="addall">+</a>
    <a href="-sharp-sharp" class="delall">-</a>
    </div>`;
    $(this).parent().parent().append(v);
})
})

< / script >