How to add Jodit editor to dynamically added text areas?

I have this JavaScript:

j = 0;

function add_more_additional_field() {
    $('#additional_options').append(
        '<div class="form-group row mar-btm"><div class="col-md-3"><input type="hidden" name="af_no[]" value="' +  j + '"><input type="text" class="form-control" name="af_title[]" value="" placeholder="Additional Title"></div><div class="col-md-7"><textarea class="form-control editor" name="af_options[]"></textarea></div><div class="col-md-1"><button onclick="delete_row(this)"  class="btn btn-danger btn-icon"><i class="demo-psi-recycling icon-lg"></i>Remove</button></div></div><hr/>'
    );
    j++;
    var editor = new Jodit('#additional_options .editor');
}

function delete_row(em) {
    $(em).closest('.row').remove();
    update_sku();
}

The function of the script is to append more form fields when clicked. This code works fine. Now I want to append a Jodit editor at each click as well. I tried doing it by attributing a unique id or class (see how I use j in the code above). But this code only appends the Jodit editor at the first text area, but doesn't add it for the other text areas..

How to append the editor to each of the text area fields?

The following line will always target the first element with the editor class:

new Jodit('#additional_options .editor');

...while you want to target the new, last element with that class. So use the possibility to pass a DOM element to the Jodit constructor. You can then get the node list of all matches, and take the last one of those, and pass it to the constructor:

new Jodit([...document.querySelectorAll('#additional_options .editor')].pop());