Getting hidden input using next and parent in Jquery

Question

I'm having a problems retriving values from two input boxes, using the parent(). and next() functions. . In my head this should work! can anyone see what i'm missing?

Thanks.

I have this HTML

<tr>
<td class='headline2' style="width: 200px; padding-bottom: 20px; padding-top:20px; padding-left: 10px; text-align: left;"><?= $value['f_name'] . " " . $value['l_name']; </td>
<td class='headline2'><?= $value[0]->end ?><br><?= $value[0]->start ?></td>
<td class='headline2'style='padding-right:18px;'><?= $value[0]->updated ?></td>
<td><div class="approve"><input disabled  <? if ($value[0]->studentApproved == 1) { ?>checked<? } ?>  type="checkbox"><label><span></span></label></div></td>
<td><div class="approve"><input disabled  <? if ($value[0]->companyApproved == 1) { ?>checked<? } ?>  type="checkbox"><label><span></span></label></div></td>
<td><div class="approve"><input class="approveME" value="<?= $value[0]->application_id ?>"   <? if ($value[0]->koordinatorApproved == 1) { ?>checked<? } ?>  id="<?= $i ?>" type="checkbox"><label for="<?= $i ?>" ><span></span></label></div></td>
<td><input class="deleteME "type="image" src="../wp-content/themes/tutorial_theme/images/DELETE.png"><td>
</tr> 
<input class="hidden" value="<?= $value[1] ?>">
<input class="hidden" value="<?= $value[0]->user_id ?>">

And this JQUERY

 $('.content').on('click', '.deleteME', function() {
    var class_id = $(this).parent().parent().next().val();
    var user_id = $(this).parent().parent().next().next().val();

    $.ajax({
        type: "POST",
        url: (my_ajax_script.ajaxurl),
        data: ({action: 'delete_student_from_class', class_id: class_id, student_id: user_id}),
        success: function(msg) {
            alert("data something" + msg);
        }

    });
});

Answer 1

You should not have html elements in table directly rather you need to put them in some td. The html should be changed. You can add hidden field in the same row in new td after your .deleteME.

Html

tr>
<td class='headline2' style="width: 200px; padding-bottom: 20px; padding-top:20px; padding-left: 10px; text-align: left;"><?= $value['f_name'] . " " . $value['l_name']; </td>
<td class='headline2'><?= $value[0]->end ?><br><?= $value[0]->start ?></td>
<td class='headline2'style='padding-right:18px;'><?= $value[0]->updated ?></td>
<td><div class="approve"><input disabled  <? if ($value[0]->studentApproved == 1) { ?>checked<? } ?>  type="checkbox"><label><span></span></label></div></td>
<td><div class="approve"><input disabled  <? if ($value[0]->companyApproved == 1) { ?>checked<? } ?>  type="checkbox"><label><span></span></label></div></td>
<td><div class="approve"><input class="approveME" value="<?= $value[0]->application_id ?>"   <? if ($value[0]->koordinatorApproved == 1) { ?>checked<? } ?>  id="<?= $i ?>" type="checkbox"><label for="<?= $i ?>" ><span></span></label></div></td>
<td><input class="deleteME "type="image" src="../wp-content/themes/tutorial_theme/images/DELETE.png"><td>
<td>
<input class="hidden" value="<?= $value[1] ?>">
<input class="hidden" value="<?= $value[0]->user_id ?>">
</td>
</tr> 

Javascript

var class_id = $(this).closest('tr').find('.hidden:eq(0)').val();
var user_id =  $(this).closest('tr').find('.hidden:eq(1)').val();

Or

var class_id = $(this).parent().next('td').find('.hidden:eq(0)').val();
var user_id =  $(this).parent().next('td').find('.hidden:eq(1)').val();