Клик по динамически создаваемым элементам

Есть следующее:

<form method="post" action="">
        <input type="text" name="table" placeholder="имя таблицы">
        <div class="column_rows" id="c_rows">
            <div class="row" id="r1">
                <input type="text" name="name_field" placeholder="имя поля">
                <select name="type_field">
                    <option default="default" value="0">Выбор типа</option>
                    <option value="1">Текстовое поле</option>
                    <option value="2">числовое поле</option>
                    <option value="3">дата</option>
                </select>
                <input type="number" name="chars_field" placeholder="Ограничение по количеству символов если есть">
                <button type="button" id="ab1" data-add="1">+</button>
                <button type="button" id="rb1" data-remove="1">-</button>
            </div>
        </div>

        <button type="submit">тык</button>
    </form>

Выглядит вот так вот:

при клике на + еще одно поле добавляется, при клике на - - удаляется.

Получается подобный HTML:

<div class="column_rows" id="c_rows">
            <div class="row" id="r1">
                <input type="text" name="name_field" placeholder="имя поля">
                <select name="type_field">
                    <option default="default" value="0">Выбор типа</option>
                    <option value="1">Текстовое поле</option>
                    <option value="2">числовое поле</option>
                    <option value="3">дата</option>
                </select>
                <input type="number" name="chars_field" placeholder="Ограничение по количеству символов если есть">
                <button type="button" id="ab1" data-add="1">+</button>
                <button type="button" id="rb1" data-remove="1">-</button>
            </div>
        <div class="row" id="r2">    <input type="text" name="name_field" placeholder="имя поля">
                <select name="type_field">
                    <option default="default" value="0">Выбор типа</option>
                    <option value="1">Текстовое поле</option>
                    <option value="2">числовое поле</option>
                    <option value="3">дата</option>
                </select>
                <input type="number" name="chars_field" placeholder="Ограничение по количеству символов если есть">
                <button type="button" id="ab2" data-add="2">+</button>
                <button type="button" id="rb2" data-remove="2">-</button>
            </div><div class="row" id="r3">    <input type="text" name="name_field" placeholder="имя поля">
                <select name="type_field">
                    <option default="default" value="0">Выбор типа</option>
                    <option value="1">Текстовое поле</option>
                    <option value="2">числовое поле</option>
                    <option value="3">дата</option>
                </select>
                <input type="number" name="chars_field" placeholder="Ограничение по количеству символов если есть">
                <button type="button" id="ab3" data-add="3">+</button>
                <button type="button" id="rb3" data-remove="3">-</button>
            </div><div class="row" id="r4">    <input type="text" name="name_field" placeholder="имя поля">
                <select name="type_field">
                    <option default="default" value="0">Выбор типа</option>
                    <option value="1">Текстовое поле</option>
                    <option value="2">числовое поле</option>
                    <option value="3">дата</option>
                </select>
                <input type="number" name="chars_field" placeholder="Ограничение по количеству символов если есть">
                <button type="button" id="ab4" data-add="4">+</button>
                <button type="button" id="rb4" data-remove="4">-</button>
            </div><div class="row" id="r5">    <input type="text" name="name_field" placeholder="имя поля">
                <select name="type_field">
                    <option default="default" value="0">Выбор типа</option>
                    <option value="1">Текстовое поле</option>
                    <option value="2">числовое поле</option>
                    <option value="3">дата</option>
                </select>
                <input type="number" name="chars_field" placeholder="Ограничение по количеству символов если есть">
                <button type="button" id="ab5" data-add="5">+</button>
                <button type="button" id="rb5" data-remove="5">-</button>
            </div></div>

Кнопка добавить первом элементе, (который статически есть) - работают, на остальных - нет. Для кнопки удаления еще не писал код. Пробовал решить так как было описано тут. У каждой кнопки свой id + $(document).ready().. - не помогло.

Как по мне причина в том что клик происходит по элементу которого якобы нет, так как он динамически создавался, думал делегирование эту проблему решит - но возник другой вопрос, как объяснить к какому элементу нужно обратиться при делегировании если мы не знаем на какой элемент может быть клик. В общем как это можно разрулить?

Код добавления:

$('[id^="ab"]').click(function () {
       let ThisCount = $(this).attr('data-add');
       let last = $('#c_rows').children().last();
       let LastCount = last.children('button').attr('data-add');
       LastCount = Number(LastCount);
       let ItemCount = (LastCount + 1);
       let row = '<div class="row" id="r' + ItemCount +'"\n>'+
           '    <input type="text" name="name_field" placeholder="имя поля">\n' +
           '                <select name="type_field">\n' +
           '                    <option default="default" value="0">Выбор типа</option>\n' +
           '                    <option value="1">Текстовое поле</option>\n' +
           '                    <option value="2">числовое поле</option>\n' +
           '                    <option value="3">дата</option>\n' +
           '                </select>\n' +
           '                <input type="number" name="chars_field" placeholder="Ограничение по количеству символов если есть">\n' +
           '                <button type="button" id="ab' + ItemCount + '" data-add="' + ItemCount + '">+</button>\n' +
           '                <button type="button" id="rb' + ItemCount + '" data-remove="' + ItemCount + '">-</button>\n' +
           '            </div>';
       $('#c_rows').append(row);
    });

Попытка делегирования

$('#c_rows').on('click', $('[id^="ab"]'), function () {
        console.log(this);
        alert("32");
    });