Jquery popup for each row

I added an extra column at the end of my table to display an icon for each row which initiate a jquery popup. At the moment I managed work with the first row, but it works only with the first row and not with the others. The icon displays for each row, but the jquery popup only from the first row opens. i believe i do some mistake with "fnDrawCallback" maybe the correct would be "fnRowCallback". Any suggestion would be helpful.

Here is my code so far:

<script type="text/javascript">
        $(document).ready(function(){
            $("#schedulesRunning").dataTable( {
                "bProcessing": true,
                "bServerSide": true,
                "bJQueryUI": true,
                "aoColumnDefs": [
                    { "bSortable": false, "aTargets": [ 8 ] },
                    { "bVisible": false, "aTargets": [ 0 ] }
                ],
                "sAjaxSource": "schedules_running.php",
                "fnDrawCallback": function () {         
                    $( "#my-button" ).on('click', function(e) {
                        $( "#element_to_pop_up" ).bPopup({
                            easing: 'easeOutBack',
                            speed: 450,
                            transition: 'slideDown'
                        });
                    });
                }
            });
        });
    </script>

Part of the server side processing script:

while ($row = mysql_fetch_row($main_query))
{
    // add an extra column that has a link
    $row[] = "<img src='images/edit.png' id='my-button' style='cursor:pointer;' alt='EDIT'/>
              <div id='element_to_pop_up'>
              <a class='b-close'>X</a>

              <!----- POPUP CONTENT START --------->
              
              <br>This Row is : #{$row[0]} and promo date: {$row[1]},<br>
              Test area to display details, even links or buttons.<br>
              
              <!--POPUP CONTENT END ---------------->
              
              </div>";
    $response['aaData'][] = $row;
}