#my-wrapper-id represents the ID you set for the field when creating it under the “Wrapper Attributes” settings.
I think by looking at your code you know that $el.find... would find nested elements inside of the new row, but you can target many things.
You don’t need to use your ID, you could use any of the values output by ACF.
for some examples:
// get all of the acf field elements (TDs or DIVs) in the added row
$fields = $el.find('.acf-field');
// get all of the input elements in added row (i.e. <div class="acf-input ....
$fields = $el.find('.acf-input');
// get all of the textarea input fields
$fields= $el.find('div[data-type=textarea"]');
// get a specific textarea field in the row
// field_123456 represents the field key of the field
$field = $el.find['[data-key="field_123456"] .acf-input textarea'];
Loop over elements
// your could loop over each field like this
var $fields = $el.find('.acf-field').each(function(index, element) {
var $key = $(element).data('key');
switch ($key) {
case 'field_1234456':
// do something
break;
case 'field_654321':
// do something else
break;
} // end switch
});
you can go directly to the field with additional “find(s)”, but eventually you’ll need to know the field key for the ACF field, or some other specific information in order to get the value or set it, for example #my-wrapper-id given in the example.
WYSIWYG fields are a special case. Not only do you need to target the acf field but you also need to target the tinyMCE element of that field and use tinyMCE methods to get or set the value. Tiny MCE keeps a list of all of the editors in the tinyMCE.editors object. Each element of this object as an ID, for example tinyMCE.editors[index].id. This ID value matches the ID value of the ACF field, which is dynamically generated for this purpose, so the only way to use it is to get it from the field. For example, in a test WYSIWYG field I just looked at the ACF field textarea looks like this
<textarea id="acf-editor-5b282e0b20cfc" class="wp-editor-area" name="acf[field_5b282dbecfe9e]" style="height:300px;"></textarea>
That ID is the ID of the editor value of the editor. You loop through this list of editors to find the one you want.
var $id = $('[data-key="field_123456"] .acf-input textarea).attr(id);
$editor = false;
for (i=0; i<tinyMCE.editors.length; i++) {
if ($id == tinyMCE.editors[i].id) {
// found the right one, set and stop
$editor = tinyMCE.editors[i];
break;
}
}
if ($editor) {
// this is a tinyMCE function call
$editor.setContent("some value");
}
I’ve probably given you more questions than answers in all this information. Custom JavaScript for ACF can be quite complex and there is very little documentation and what is there is pretty basic. We are mostly on our own in this area. The only reason I have any idea is by doing a lot of experimenting and looking a lot of HTML that is created by ACF.
