Нужна редактируемая текстовая область с пронумерованными линиями, которая хорошо работает с 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>

Другие возможные решения, хотя и не такие чистые, были бы

• выделите текст соответствующих людей (например, если мышь находится в строке 26 текстовой области 1, выделите текст в строках 26 других текстовых областей)

• прокрутка каждого текстового поля вместе