会导致id重复无法触发点击onclior事件 想的是在多数据的情况下同id的删除按钮互不影响

Question

想通过点击删除时将对应的值删除掉，
采用的是localStorage作为历史记录的存储方案，
问题是对应删除时因为是使用innerHTML创建的有多少个数据就显示多少个
会导致id重复无法触发点击onclior事件
想的是在多数据的情况下同id的删除按钮互不影响

inputRecommendation.onclick = function(shwHir){
        SearchInput.focus();
        shwHir.cancelBubble = true;
        let locaShow = JSON.parse(localStorage.getItem('SearchInputValue')) || [];
        if(localStorage.getItem('SearchInputValue') !== null){
            sh_for_rmd_rods.style.display = 'block';
        }else{
            sh_for_rmd_rods.style.display = '';
        };
        let Showhtml = '';
        for(let i = 0; i < locaShow.length; i++){
            Showhtml += `<li class='SearchHiy_font'data-key='SearchInputValue' data-index=${i}><span class="Search-font">${locaShow[i]}</span><span class='SearchiconDelBin'id='delhiy' data-inex=${i} data-value=${locaShow[i]}>删除</span>`;
        };
        ShowHistory.innerHTML = Showhtml;
    };

Answer 1

可以给设置成不同的id吗？id里拼上循环的i