Селектор jQuery для массива атрибутов данных

Проблема может заключаться в " и/или [] в значении атрибута. Удалите его или попробуйте использовать часть (наиболее важную часть?) значения атрибута:

$('[data-attrrelated* = "1658734650073"]')
  .append('some html here!');
$('[data-attrrelated* = "wcpa-select-165873465007"')
  .append('<br>some html here too!');

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class = "wcpa_form_outer" data-attrrelated = "[&quot;wcpa-select-1658734650073&quot;]"></div>

Проблема в том, что вы используете объект HTML " в своем атрибуте. Это переводится в буквальную цитату. JQuery не выполняет преобразование сущностей, поэтому он буквально ищет строку ["wcpa-select-1658734650073"] с амперсандами и всем остальным, а не ["wcpa-select-1658734650073"], которая является фактическим значением в вашем атрибуте.

Вы можете обойти это, используя один из следующих методов (после перевода Entity в кавычки в вашем коде).

1. Используйте селектор CSS «содержит» для вашего атрибута ( attr*=value ) (продемонстрировано ответом KooiInc) или
2. Используйте шаблон строки, который позволит вам встроить оба типа кавычек в вашу строку и получить точное совпадение ( attr=value ), как показано ниже.
3. Создание строкового значения, содержащего кавычки, с помощью конкатенации строк (например, '["' + value + '"]' )
4. Используйте функцию decodeEntities из этого ответа, чтобы перевести значение вашего атрибута перед попыткой поиска (не проверено, и ему 10 лет)

jQuery(`.wcpa_form_outer[data-attrrelated='["wcpa-select-1658734650073"]']`).append('foo')

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "wcpa_form_outer" data-attrrelated = "[&quot;wcpa-select-1658734650073&quot;]">append here: 
</div>