Поправь нас к «каждому» в jQuery

Question

У меня есть 2 кальдерных формы на одной странице, и у меня есть этот фрагмент jQuery, используемый для манипулирования некоторыми разметками.

$('.ss-form-fields').prependTo('.caldera_forms_form');

Проблема в том, что обе формы имеют .ss-форму Элемент -fields и в результате я получаю дубликаты элементов.

Итак, я попробовал это;

$(".caldera-grid").each(function(){
$('.ss-form-fields').prependTo('.caldera_forms_form');
});

.caldera-grid - класс в верхней части разметки формы.

Должно ли это сработать (потому что это не сработало) или я все делаю неправильно?

РЕДАКТИРОВАТЬ

Цель .prependTo состояла в том, чтобы принести .ss -form-fields вверху разметки, чтобы я мог использовать дочерние селекторы в css, так как я не мог заставить их работать иначе. Без предоплаты разметка выглядела так:

С предоплатой я могла бы сделать разметку похожей на это;

Если есть лучший способ достижения подобного результата, я бы хотел услышать об этом.

Answer 1

Это работает как задумано, если вы делаете это следующим образом:

$(".caldera-grid").each(function(){
   let fields = $(this).find('.ss-form-fields')
   $(this).find('.caldera_forms_form').prepend(fields);
});

Работа Fiddle с соответствующей структурой вашей страницы.