Retrieve a specific row value from table HTML and submit it to PHP

Question

I'm populating a table from my database and it looks like this :

<form name = "Form" role="form" action ="php/teilnehmen.php" method="POST">
    <fieldset>
                        <table width="100%" class="table table-striped table-bordered table-hover" id="dataTables-example">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>Studienfach</th>
                                    <th>Teilnehmer/in</th>
                                    <th>Teilnehmen</th>
                                </tr>
                            </thead>
                            <tbody>
//<?php php code..... 
$i =0;
$sizeofstudienfaecherseperate = 
count($studienfaecherseperate);
for ($i; $i < $sizeofstudienfaecherseperate; $i++) {

?>
                                        <tr class="odd gradeX">
                                    <td ><?php echo($i+1);?></td>
        <td class="studienfach"><?php echo($studienfaecherseperate[$i]);?>
 <input   type="hidden" name="PARAM_STUDIENFACH" id="PARAM_STUDIENFACH" 
 value="<?php echo($studienfaecherseperate[$i]);?>"> </input>
        </td>
                                    <td ><?php echo($teilnehmer[$i]);?></td>
                                    <td width="10%">
         <?php if ($teilnahmestatus[$i] =="0"){ ?>
 <button type="submit" class="btn btn-success use-address" 
 name="teilnehmern"id="teilnehmen">Teilnehmen</button>
 <?php }else{?>
 <button type="submit" class="btn btn-danger use-address" name="teilnahme-beenden" 
 id="teilnahme-beenden">Teilnahme beenden</button>
 <?php }?>
                                    </td>
                                </tr>
                                <?php } ?>
                        </tbody>
                        </table>
      </fieldset>                  <!-- /.table-responsive -->

the table is shown great, and my problem is when i try to submit my second column value "PARAM_STUDIENFACH" of a specific row to my php webservice. It always gives me back the last value. I know that because I'm using the same id in every row so it will be overwritten. I tried using JavaScript to return the value of the clicked row from other questions in the forum but it didn't work for me. I'm using a bootstrap table if that helps.

EDIT 1 :

Thanks to @Taplar answer I managed to find a solution to my problem. I used this JavaScript to retrieve the data and ajax to send a post request. This is the code I used :

$(".use-address").click(function() {

var item = $(this).closest("tr")   // Finds the closest row <tr> 
                   .find(".studienfach")     // Gets a descendent with class="nr"
                   .text();         // Retrieves the text within <td>
$.ajax({
        type: "POST",
        dataType: "json",
        url: "php/teilnehmen.php",
        data: {PARAM_STUDIENFACH:item},
        success: function(data){
            alert(item);
        },
        error: function(e){
            console.log(e.message);
        }
});

});

my problem now is in the alert the "item" shows correctly but in my database it is saved as the following example :

item = a (shows in alert a)

item = a \\n (it's saved like that in the database with spaces afeter \\n)

i tried to trim the item before sending it but i got the same result

to get the item sent by ajax i'm using this line of code in :

$studienfach = null;

if(isset($_POST['PARAM_STUDIENFACH']))
    $studienfach = $mysqli->real_escape_string($_POST['PARAM_STUDIENFACH']);

EDIT 2:

i managed to solve my second problem by doing this :

$pos= strpos($studienfach, "\\");
$studienfachtemp = substr($studienfach, 0,$pos);
trim($studienfachtemp);

if there is more elegent or correct way to do it ! please post it ! thank you all.

Answer 1

<elem1>
    <elem2 class="getMe"></elem2>
    <elem3></elem3>
</elem1>

Quick contextual lookup reference. Say you have a click event bound on all 'elem3' on your page. When you click it you want to get the associated 'elem2', not all of them. With the class you can contextually look this element up by doing...

//'this' being the elem3 that was clicked
$(this).closest('elem1').find('.getMe');

From the element you clicked, it will find the shared 'elem1' parent of both 'elem2' and 'elem3' and then find only the '.getMe' that belongs to that parent.

More reading material: http://learn.jquery.com/using-jquery-core/working-with-selections/