Question

I’m having the hardest time trying to reference the next occurrence of an element with an ID containing a specific string.

Basically, I have a link, and I need to show() the NEXT div acting as a container for editing.

<div>
<a href="#" id="link-1">Link</a> // go from here
</div>

<div id="form-container-1" class="hidden"> // to here
<form>
...
</form>

Important to note: I’m not just targeting one id … the purpose of the “1” within the form-container id is because there are several. I’m using the “contains” selector id*="form-container"

Answer 1

If you want to dynamically find the correct form to show based on the id then something like:

$('a').click( function() {
   formId = $(this).attr('id').split('-')[1];
   $('#form-container-'+formId).show();
});

Alternatively, if you want to find the next form after each link:

$('a').click( function() {
   $(this).next('form').show();
});

Both of these, it would be advisable to add a unique class to links that will show forms and update the selectors accordingley.