需要带有编号行的可编辑textarea，与bootstrap4一起使用

Question

我有多个文本区域（实际代码中有两个以上的文本区域），其中每个文本区域的每一行代表一个需要添加到数据库中的不同人员。

在添加大量人员并滚动文本区域内的列表时，不清楚哪一行与其他文本区域中的哪些行匹配。

我只发现了在bootstrap4环境中无法正常工作的较旧解决方案。

<form>
    <div class="form-row">
        <div class="col">
            <div><label>Batch add.</label></div>          
        </div>
    </div>
    <div class="form-row">
        <div class="col-sm-6 col-md-3">
            <div><label>Given Names</label></div>
            <div><textarea rows="10" name="textGivenName" autofocus class="form-control"></textarea></div>
        </div>
        <div class="col-sm-6 col-md-3">
            <div><label>Family Names</label></div>
            <div><textarea rows="10" name="textFamilyName" class="form-control"></textarea></div>
        </div>
    </div>
    <div class="form-row">
        <div class="col">
            <div>
                <p></p>
            </div>
            <div class="text-center"><button class="btn btn-primary" type="button">Add all</button></div>
        </div>
    </div>
    <div class="form-row"></div>
</form>

其他可能的解决方案，尽管没有那么干净

• 突出显示相应人员的文本（例如，如果鼠标位于文本区域1的第26行，则突出显示其他文本区域的第26行的文本）

• 一起滚动每个文本区域