点击复制按钮无法匹配对应textarea问题求助（CodeIgniter+JS）

问题根源 #

• 所有textarea使用了重复的id="text-copy"，HTML规范中id必须唯一，导致document.getElementById始终只会获取页面中第一个匹配的元素。
• 点击按钮时未传递当前行上下文，无法定位到对应行的目标textarea。

修正后的代码 #

表格HTML部分

<tbody>
    <?php foreach ($orderresep as $row) : ?>
        <tr>
            <td><?= $row->NOREG; ?></td>
            <td><?= $row->NORM; ?></td>
            <td><?= $row->DESKRIPSI; ?></td>
            <td><?= $row->PEMBERI_RESEP; ?></td>
            <td><?= $row->NAMA; ?></td>
            <td>
                <!-- 替换重复id为class，清理textarea内的多余换行空格 -->
                <textarea class="form-control text-copy" readonly><?= trim($row->GROUPP); ?></textarea>
                <!-- 点击时传递当前按钮元素到函数 -->
                <button class="btn btn-primary btn-sm mt-1" onclick="copyText(this)">
                    <i class="fa fa-copy"></i> Salin
                </button>
            </td>
        </tr>
    <?php endforeach; ?>
</tbody>

JavaScript部分

<script type="text/javascript">
function copyText(btn) {
    // 通过按钮定位到同一单元格内的目标textarea
    const textarea = btn.parentElement.querySelector('.text-copy');
    textarea.select();
    
    try {
        document.execCommand('copy');
        // 可选：添加复制成功提示，比如 alert('数据已复制')
    } catch (err) {
        console.error('复制失败:', err);
    }
}
</script>

补充说明 #

• 使用btn.parentElement.querySelector('.text-copy')可以不受元素排列顺序影响，更稳定地定位到当前行的textarea。
• 若布局固定（textarea始终在按钮前），也可以用btn.previousElementSibling替代，写法更简洁。

内容的提问来源于stack exchange，提问作者IMAM IHSANI