javascript - Get input field value of current table row and append it to another element -

i have <input> field <button> in each table row. table created dynamically data json file, don't think important.

the problem want able click on button , append specific <td>s html element.

basically, it's supposed content of first <td> in table , append value of input field. using above code works, however, first <td> of table being appended correctly, while input field value stay same else.

i don't know how else word here's snippet:

$("#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() + '<br />' + $note.val() + '<br />');      });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  <div id="medi-table">    <table class="table table-hover">      <thead>        <tr>          <th>medikament</th>          <th>notes</th>          <th>add</th>        </tr>      </thead>      <tbody id="medikamentenliste">        <tr>          <td>item 1</td>          <td>            <input type="text" class="note"></input>          </td>          <td>            <button class="btn btn-default btn-block btn-add-med">add</button>          </td>         </tr>        <tr>          <td>item 2</td>          <td>            <input type="text" class="note"></input>          </td>          <td>            <button class="btn btn-default btn-block btn-add-med">add</button>          </td>        </tr>        <tr>          <td>item 3</td>          <td>            <input type="text" class="note"></input>          </td>          <td>            <button class="btn btn-default btn-block btn-add-med">add</button>          </td>        </tr>      </tbody>    </table>  </div><!--end medi-table-->    <div id="contenthere"></div>

the problem takes input first input box in first row, want them individual.

you're taking input value first item class note. you'll have select element current row, you've stored in myrow

to so, can use jquery's find method:

var currentnote = myrow.find(".note"); 

check out updated code:

    $("#medi-table").delegate(".btn-add-med", "click", function(){          var $this = $(this),              mycol = $this.closest("td"),              myrow = mycol.closest("tr"),              targetarea = $("#contenthere"),              $note = myrow.find(".note");          targetarea.append(myrow.children().not(mycol).text() + '<br />' + $note.val() + '<br />');      });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  <div id="medi-table">  						<table class="table table-hover">  							<thead>  								<tr>  									<th>medikament</th>  									<th>notes</th>  									<th>add</th>  								</tr>  							</thead>  							<tbody id="medikamentenliste">  <tr><td>item 1</td><td><input type="text" class="note"></input></td><td><button class="btn btn-default btn-block btn-add-med">add</button></td></tr>  <tr><td>item 2</td><td><input type="text" class="note"></input></td><td><button class="btn btn-default btn-block btn-add-med">add</button></td></tr>  <tr><td>item 3</td><td><input type="text" class="note"></input></td><td><button class="btn btn-default btn-block btn-add-med">add</button></td></tr>  							</tbody>  						</table>  					</div><!--end medi-table-->    <div id="contenthere">       </div>