Date jquery function fails to work on table row : <p>The logic is first select a start date in each row, then click the button, a result date will show according to the skip day. For some reason, my code isn't working, any thought? Thanks</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(".add").on('click', function() {

  var $row = $(this).closest('tr');
  
  var start = $row.find('.date').val());
if (start) {

  var set = new Date(start);

  set.setDate(set.getDate() + Number($row.find(".day").val()));

  $row.find(".result").val([set.getMonth() + 1, set.getDate(), set.getFullYear()].join('/'));
}
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"&gt;&lt;/script&gt;
&lt;table id="one"&gt;
  &lt;th&gt;Date&lt;/th&gt;
  &lt;th&gt;Skip days&lt;/th&gt;
  &lt;th&gt;Result&lt;/th&gt;
  &lt;tbody&gt;
    &lt;tr&gt;
      &lt;td&gt;
        &lt;input type="date" class="date"&gt;&lt;button class="add" type="button"&gt;OK&lt;/button&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="text" value="3" class="day"&gt; &lt;/td&gt;
      &lt;td&gt;&lt;input type="text" class="result"&gt; &lt;/td&gt;
    &lt;/tr&gt;

    &lt;tr&gt;
      &lt;td&gt;
        &lt;input type="date" class="date"&gt;&lt;button class="add" type="button"&gt;OK&lt;/button&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="text" value="3" class="day"&gt; &lt;/td&gt;
      &lt;td&gt;&lt;input type="text" class="result"&gt; &lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
&lt;/table&gt;</code></pre>
</div>
</div>
</p>
