Php 将文本字段追加到具有相同ID的多个文本字段中的最后一个

添加记录后，用户可以返回并编辑记录。如果插入3，则将有3个具有不同值的文本区域。我希望他们能够点击一个按钮，并添加尽可能多的文本区域。我的问题是，这样做时，新的空白文本区域出现在第一个文本区域下，而不是第三个文本区域，使其成为第4个文本区域。我尝试过使用jQuery'last'，但似乎不起作用

<div class="form-group m-form__group" id="branch">
    <label for="example_input_full_name">
    Branch/Outlet
    </label>
    <textarea class="form-control m-input" name="branch[]" rows="6"><?php echo sanitize($branches->outlet_name); ?></textarea><p></p>
</div>

<script type="text/javascript">
    $( '#add-more' ).on('click', function() {
        var branch =    "<div class='form-group m-form__group' id='branch'>" +
                        "<label for='example_input_full_name'>" +
                        "Branch/Outlet" +
                        "</label>" +
                        "<textarea class='form-control m-input' name='branch[]' rows='6'></textarea>" +
                        "</div>";
        $( '#branch' ).last().append(branch);
    });
</script>

分行/网点

$（“#添加更多”）。在（'click'，function（）上{
var branch=“”+
"" +
“分行/网点”+
"" +
"" +
"";
$（'#branch'）.last（）.append（branch）；
});

您不能在HTML中为多个元素提供相同的

id

。因此，将一个

div

作为父元素，该元素包含它内部的所有

textarea

，最后附加创建的

div

$（'#添加更多'）。在（'click'，function（）上{
var branch=“”+
"" +
“分行/网点”+
"" +
"" +
"";
$（'分支'）。追加（分支）；
});

新增
分行/网点