如何根据当前所选按钮的上下文选择正确的子元素隐藏的输入值？

Question

I trying to put together a 5 day checklist app. The check list app has 5 divs that span across the page horizontally. Each div represents a day. Each div represents a day of the week and each div contains a hidden input field which holds a date value for for that particular day. Each div also has a check-list button and when the user clicks on that button the task list is removed and a form appears in its place to add a task. I'm trying to capture the value of the hidden input field, which is the date for that particular div. However, even though I'm using the "this" keyword, no matter which check-list button I click, I'm getting back the current date only. Which is the input value in the first div. How can I select the unique input value(the date) based upon which check-list button I click?

jquery:

$(".task-btn").click(function(){
    // Setting form to the clone I want to acces in .on()
    var refdate = $(this).closest('#replace').children('.hidden-date').val();
    console.log(refdate);
});

html and php:

<?php 
  $date = date("F j, Y");
  $refDate = date("Y-m-d");
  $counterForLi = 0;
?>
<div id="replace">
              <input type="hidden" name="thedate" class="hidden-date" value="<?php echo $refDate; ?>">
              <h2 class="day"></h2>
                <h4 class="thedate">
                  <?php
                    if ($counter > 0) {
                      $tomorrow = mktime(0, 0, 0, date("m"), date("d")+$counter, date("y"));
                      $refDate = date("Y-m-d", $tomorrow);
                      $date = date("F j, Y", $tomorrow);
                      echo $date;
                    } else {
                      echo $date;
                    }
                  ?>
                </h4>
                <?php echo $refDate; ?>

                <div class="btn-group">
                  <button class="btn task-btn">Add Task</button>

Note: I echoed out the date for each div and made sure there wasn't a problem with the php.

Answer 1

Although the answer to your question can be:

$(this).parents("#replace").find('.hidden-date').val();

Your problem is somewhere in another place because the snippet you shown should also work