Javascript jquery set div attr id不起作用，但用于其余元素

我正在创建一个div及其包含的所有元素的克隆。对于新的div，我正在更改id，我可以更改所有的id，但是div-one，知道我做错了什么吗

HTML

<form class="form-horizontal" action="${pageContext.request.contextPath}/search" method="post">             
    <div class="card" id="criteriaContainer_0">
        <div class="card-body">
            <div class="row">
                <div class="col-sm-12" id="andOr_0">And</div>
            </div>
            <div class="row">
                <div class="col-sm-2">
                    <div class="input-group mb-3">
                        <input type="text" class="form-control" id="leftParenthesis_0" readonly>
                        <div class="input-group-append">
                            <button class="btn btn-outline-success" id="addLeftParenthesis_0" title="Add left parenthesis" onclick="addLeftParenthesis(this)" type="button">+</button> 
                            <button class="btn btn-outline-danger" id="delLeftParenthesis_0" title="Remove left parenthesis" onclick="delLeftParenthesis(this)" type="button">-</button> 
                        </div>
                    </div>
                </div>
                <div class="col-sm-8">
                    <input type="text" class="form-control" id="criteria_0" placeholder="Enter search term" name="criteria_0" required>
                </div>
                <div class="col-sm-2">
                    <div class="input-group mb-3">                                  
                        <div class="input-group-prepend">
                            <button class="btn btn-outline-danger" id="delRightParenthesis_0" title="Remove right parenthesis" onclick="delRightParenthesis(this)" type="button">-</button> 
                            <button class="btn btn-outline-success" id="addRightParenthesis_0" title="Add right parenthesis" onclick="addRightParenthesis(this)" type="button">+</button> 
                        </div>
                        <input type="text" class="form-control" id="rightParenthesis_0" readonly>
                    </div>
                </div>
            </div>
        </div>                  
    </div>              

    <div class="row">
        <div class="col-sm-2 offset-sm-10">
            <button class="btn" id="addCriteria" title="Add (Up to 5 criteria)" onclick="addSearchTerm()" type="button"><i class="fas fa-plus-circle" style="font-size:48px;color:green"></i></button>
            <button class="btn" id="delCriteria" title="Delete search term" onclick="delSearchTerm()" type="button"><i class="fas fa-minus-circle" style="font-size:48px;color:red"></i></button>
        </div>
    </div>          
</form> 

请试着换衣服

var newCriteria = $("#criteriaContainer_0").clone(true);

到

请试着换衣服

var newCriteria = $("#criteriaContainer_0").clone(true);

到

---

成功了！你能解释一下为什么会有，而不是像我说的那样在一个单独的行中吗？那是因为克隆后，你有两个具有相同id的div。这很有道理！成功了！你能解释一下为什么会有，而不是像我说的那样在一个单独的行中吗？那是因为克隆后，你有两个具有相同id的div。这很有道理！

  var newCriteria = $("#criteriaContainer_0").clone(true).attr("id", "criteriaContainer_" + current_id);