Printing HTML form based on row id

Question

Is there is a way to print a HTML form on each row of a table in such a way that the form should have a that particular row id.

I have a php for loop. The for loop fetch the data from the database and put it into the table. Each row of the table have a button. When we click on the button a form appears. But the problem is that no matter which row button I click each form will have the same row Id. sample images are attached below:

Some One told me to use data-id="" and then $(this).attr('data-id')in my click event but i am not sure how to use it

No matter which row submit button I click the Row id is same:

my code:

    <thead>
          <tr>
            <th class="active1">ID</th>
            <th>Title</th>
            <th>Description</th>
            <th>Critility</th>
            <th>Priority</th>
            <th>Date Submitted</th>
            <th>Submittions</th>
          </tr>
 </thead>
          <?php
          foreach($results as $data){
          echo '<tbody>
                  <div class="tryinglift"><tr class="dropDown">
                  <td><div class="bn">#'.$data['NO'].'</div></td>
                  <td><div class="titleInTable truncatee">'.$data['Title'].'<div></td>
                  <td><div class="truncate">'.$data['Description'].'</div></td>
                  <td><div class="c">'.$data['criticality'].'</div></td>
                  <td><div class="c">'.$data['Priority'].'</div></td>
                  <td>'.$data['Date_Submitted'].'</td>
                  <td><button class="showPop" class="btn btn-primary btn-small">SUBMIT</button></td>

              </tr></div>
            <div id="overlay"></div>
            <div id="specialBox">
         <form action="php/inbetween.php" method="POST" class="submittion_from">
            <fieldset class="removeGender1">
                <label>NO</label> 
                <label >YES</label>    
                </fieldset><br>
                <input type="text" name="id" value='.$data['no'].'>
                 <fieldset class="removeGender">
                      <label>xyz questions</label>
                            <input type="radio" name="optradio" value="NO">     
                            <input type="radio" name="optradio" value="YES">
                </fieldset><br>
                <fieldset class="removeGender">
                     <label>xyz questuion</label>
                            <input type="radio" name="optradio1" value="NO">  
                            <input type="radio" name="optradio1" value="YES">
               </fieldset><br>
               <fieldset class="removeGender">
                      <label>xyz questions</label>
                            <input type="radio" name="optradio2" value="NO">                           
                            <input type="radio" name="optradio2" value="YES">
              </fieldset><br>
          <input type="submit" value="SUBMIT" id="no">
    </form>
                <button class="closePop">Close Overlay</button>
        </div>
            </tbody>';
           echo '<div id="style1">
                    <div>'.$data['Description'].'</div>
            </div>';

          }  


    ?>

My jQuery:

    $(".showPop").click(function(){
    $("#overlay").css({"display":"block"});
    $("#specialBox").css({"display":"block"}); 
});
$(".closePop").click(function(){
   $("#overlay").css({"display":"none"});
    $("#specialBox").css({"display":"none"}); 
});