javascript select the current div

Question

i want to place the selected product with quantity and price in another div tag using jquery Click function. Evertime I click its only the first array value of the variable "product" is displayed.

How can I select the values of the Current row for the table.

Twig template

<tr>
<td class="reference">{{product.reference}}</td>
<td class="product">{{product.productNr}} </td>
<td class="product">{{product.productDesp}} </td>
<td class ="price">{{product.price}}</td>
<td class="input"><input type="text" /></td>
<td class="warenkorb"><button type='submit'>in den Warenkorb</button></td>
</tr>

<div id ="cart">
<!-- Here comes the selected product by the user -->
 ????????
</div>

My Javascript:

$('.warenkorb').click(function(){
           var reference =('.reference').text();
            alert(reference);
        });

});

Data:

 ------------------------------------------------------
| reference | product | ProductNr | quantity | price |
______________________________________________________
|Jack store| Apple    | 12435436  | 7        | 70€   |
______________________________________________________
|bill store| Apple    | 32534534  | 4        | 34€   |
______________________________________________________

Answer 1

You can use the this element. It´sa reference to the element that was clicked. This way you can use jQuery to select the values you want from the correct row.

$('button[type=submit]').click(function(){
    var $parent = $(this).closest('tr'),
        name = $parent.find('.product-name').text(),
        quantity = $parent.find('.input input').val() || 1,
        price = $parent.find('.price').text();

   $('#cart').text(quantity + 'x ' + name  + ' - ' + price);
});

JSFiddle

Answer 2

Try this:

 $('.warenkorb button').click(function() { var closestTr = $(this).closest('tr'); var reference = closestTr.find('.reference').html(); var product = closestTr.find('.product').html(); var price = closestTr.find('.price').html(); var textdata = closestTr.find('input').val(); // If you want last value to top $("#cart").prepend(reference+"|"+product+"|"+price+"|"+textdata); // If you want last value to bottom $("#cart").append(reference+"|"+product+"|"+price+"|"+textdata); // If you want replace div data $("#cart").html(reference+"|"+product+"|"+price+"|"+textdata); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <table> <tr> <td class="reference">a1</td> <td class="product">a2</td> <td class="price">a3</td> <td class="input"> <input type="text" /> </td> <td class="warenkorb"> <button type='submit'>in den Warenkorb</button> </td> </tr> <tr> <td class="reference">b1</td> <td class="product">b2</td> <td class="price">b3</td> <td class="input"> <input type="text" /> </td> <td class="warenkorb"> <button type='submit'>in den Warenkorb</button> </td> </tr> </table> <div id="cart"> <!-- Here comes the selected product by the user --> ???????? </div>