title: Get input field value of current table row and append it to another element
body: <p>I have a <code>&lt;input&gt;</code> field as well as a <code>&lt;button&gt;</code> in each table row. The table is created dynamically with data from a JSON file, however I don't think this is important.</p>
  
  <p>The problem is that I want to be able to click on the button and append specific <code>&lt;td&gt;</code>s to another HTML element.</p>
  
  <p>Basically, it's supposed to get the content of the first <code>&lt;td&gt;</code> in the table and append it together with the <strong>value</strong> of my input field. Using the above code works, however, only the first <code>&lt;td&gt;</code> of the table is always being appended correctly, while the input field value will stay the same for everything else.</p>
  
  <p>I don't know how else to word it so here's a snippet:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$("#medi-table").delegate(".btn-add-med", "click", function(){
          var $this = $(this),
              myCol = $this.closest("td"),
              myRow = myCol.closest("tr"),
              targetArea = $("#contentHere"),
              $note = $(".note");
          targetArea.append(myRow.children().not(myCol).text() + '&lt;br /&gt;' + $note.val() + '&lt;br /&gt;');
      });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div id="medi-table"&gt;
    &lt;table class="table table-hover"&gt;
      &lt;thead&gt;
        &lt;tr&gt;
          &lt;th&gt;Medikament&lt;/th&gt;
          &lt;th&gt;Notes&lt;/th&gt;
          &lt;th&gt;Add&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody id="Medikamentenliste"&gt;
        &lt;tr&gt;
          &lt;td&gt;Item 1&lt;/td&gt;
          &lt;td&gt;
            &lt;input type="text" class="note"&gt;&lt;/input&gt;
          &lt;/td&gt;
          &lt;td&gt;
            &lt;button class="btn btn-default btn-block btn-add-med"&gt;Add&lt;/button&gt;
          &lt;/td&gt;
         &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;Item 2&lt;/td&gt;
          &lt;td&gt;
            &lt;input type="text" class="note"&gt;&lt;/input&gt;
          &lt;/td&gt;
          &lt;td&gt;
            &lt;button class="btn btn-default btn-block btn-add-med"&gt;Add&lt;/button&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;Item 3&lt;/td&gt;
          &lt;td&gt;
            &lt;input type="text" class="note"&gt;&lt;/input&gt;
          &lt;/td&gt;
          &lt;td&gt;
            &lt;button class="btn btn-default btn-block btn-add-med"&gt;Add&lt;/button&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
  &lt;/div&gt;&lt;!--end medi-table--&gt;
  
  &lt;div id="contentHere"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The problem is that it only takes input from the very first input box in the first row, where I want them all to be individual.</p>