jquery Clone Radio Select Input Index Array Update - All in one form

Question

I have a gym membership form that clones two separate radio groups, many inputs and select options, for as many users as possible to signup at one time.

Radio:

1. Group 1 for Gender two options male/female
2. Group 2 for Type as 3 membership types linked with Fee per Type

Select:

1. Has multiple options for Fees linked to each Type

Text Input:

As many as required, no issues there.

The problem:

Can't get the index of checked Radio to use in .eq(...) to have an effect on the cloned rows per index in a mapped fashion as used in the select and fees link which are working all right.

The code works fine on original source row, but then it directs all the new checks switching to the last cloned row.

Here is a jfiddle link:

JSFIDDLE CLONE RADIO SELECT LINK UPDATE

I have looked around for a solution but none fit to fix the situation.

Much appreciated.

Answer 1

OK!

Managed to do a workaround, basically a trick, which is much easier through getting the parent or the container index by combining the .closest('selector') with .find('input.selector') to send switching message to the cloned row where itself is a part of.

Get the closest container and dispatch on change to it from each radio, of each radio group, for each cloned row. Example code below:

$(document).on('change','input.colors', function() {
        var $parentIndex = $(this).closest('.selector');
        parentIndex.find('input.selector').< DO WHATEVER AFTER >;
});

This article on the jQuery site helped a lot. Link below:

.closest()

Hope this helps others who could have the same requirement.