Show and hide select input which is created dynamically

Question

I want to show a select form (which is hidden), when a checkbox is checked. I have coded this bootply which is working right.

However, in my JSP page depending what an object contains, many checkboxes are printed, which all of them contain the .action-do class so, what is happening is this bootply

The code in JSP:

<%for (int i=1; i<=positions; i++){ %>

<div class="checkbox">
    <label><input class="action-hide" type="checkbox" name="action-hide" value="1">Select</label>
</div>

<div class="form-group action-do">
  <div class="col-lg-4">
    <select class="form-control" id="select" name="">
          <option value="0" selected></option>
          <option value="1">aaaa</option>
          <option value="2">bbb</option>
    </select>
  </div>                     
</div>

<%}%>

How can I do, so every checkbox reveals only his select.

Answer 1

One option is to use next. Since next refers to next sibling just get the parents sibling like so:

if($(this).is(":checked")) {
    $(this).parent().parent().next().show();
} else {
    $(this).parent().parent().next().hide();
}