title: How to bind javascript to checkboxes and datetimepicker inside table created in MVC5 view
body: <p>Basically,</p>
  
  <p>I have a table created in MVC view.</p>
  
  <p>Each row has a checkbox and a datetime HTML input control associated with the part order.
  I'd like to automatically set datetime picker to today's date if checkbox is selected. 
  I know how to do it if my checkbox and datetime have a predefined IDs (see jquery script below), but in this case, I don't know ahead of time how many rows I will have ahead of time. I'm somewhat stuck on trying to figure an easiest way to setup unique IDs and subsequently read them from the javascript.</p>
  
  <p>Here is the snippet of my code from the MVC View:</p>
  
  <pre><code>&lt;tbody&gt;
  @foreach (var partOrder in Model.PartOrders)
   {
    &lt;tr&gt;
     &lt;td&gt;@Html.DisplayFor(m =&gt; partOrder.Part.Description, new { htmlAttributes = new { @class = "form-control" } })&lt;/td&gt;
     &lt;td class="text-center"&gt;@Html.EditorFor(m =&gt; partOrder.IsPartReceived, new {htmlAttributes = new { @class = "checkbox isPartReceived" } })&lt;/td&gt;
     &lt;td class="text-center"&gt;@Html.DisplayFor(m =&gt; partOrder.OrderedOn, new { htmlAttributes = new { @class = "form-control" } })&lt;/td&gt;
     &lt;td&gt;@Html.EditorFor(m =&gt; partOrder.ReceivedOn, new { htmlAttributes = new { @class = "form-control partReceivedOn"} })&lt;/td&gt;
   &lt;/tr&gt;
  }
  &lt;/tbody&gt;
  </code></pre>
  
  <p>The first @Html.EditorFor is generating the checkbox, and the second one is the datetime picker.</p>
  
  <p>Here is the example of jquery that I use elsewhere on the page to do something similar:</p>
  
  <pre><code>            $("#IsBoxRequested").click(function () {
                  var checkBox = $("#IsBoxRequested");
                  var timeBox = $("#BoxRequestedOn");
                  setTime(checkBox, timeBox);
              });
  
  
      function setTime(checkbox, timebox) {
          if (checkbox.prop('checked') == true) {
              timebox.val(getToday());
          }
          else {
              timebox.val(null);
          }
      }
      function getToday() {
          var now = new Date();
          var day = ("0" + now.getDate()).slice(-2);
          var month = ("0" + (now.getMonth() + 1)).slice(-2);
          return today = now.getFullYear() + "-" + (month) + "-" + (day);
      }
  </code></pre>
  
  <p>Any tips on how I can this trick on dynamically created checkbox inputs are greatly appreciated.</p>