I try to make a code, which should move two objects at one time when clicking '.moveright' button. The first object is a div containing an image, a logo (line 2 of the code) inside '.parent' div and the button itself. It works. The div is moving right between similar divs.
The problem starts when I try to move a corresponding div (in a different section of the html file) with audio (the audios have the same classes as the logos img and thus could be identified as assigned. But it does not seem to move. What could I have written wrong in the code?
The general idea is that I have, let's say, 20 divs with clickable images representing different audio files. When clicked on one of them, the corresponding audio file starts to play thanks to finding corresponding classes using .attr - and it works.
Now I try to make these logos and audios movable right or left, so when I move, let's say, the first div with its logo one step to the right, the same thing should happen to a div with audio (with 'audio' having the same classes as the img) in the set of divs containing these corresponding audios - it also should move one place right (so become the second div in set of divs with audios).
$('.parent').on('click', '.moveright', function() {
$($(this).closest('div.c')).insertAfter($($(this).closest('div.c')).next('div.c'));
const imgClasses3 = $($('.moveright').first('div.c img.r')).attr('class');
const selector3 = 'audio.' + imgClasses3.split(' ').join('.');
$($(selector3).closest('div.aud')).insertAfter($($(selector3).closest('div.aud')).next('div.aud');
})
You may want to consider using the CSS flex order property. Here is an example or 3 squares that go to the front when you click on them.