如何使用jQuery将ID从MySQL发送到div？

Question

On my page a couple of messages are retrieved from the database. They are displayed using fetch_array . On the corner of every message a button is shown. This button contains the ID of the message. When it's clicked, a div will slide downwards from the top of the page, asking for a confirmation. If the yes-button is clicked, the message will be deleted. If the no-button is clicked, the div slides upwards, off canvas.

How can I send the ID from the message to the yes-button, so the right message will be deleted instead of all messages? I wrote this piece of code but this doesn't work.

<? while($result=mysqli_fetch_array($sql,MYSQLI_ASSOC)){ ?>
    <div class="memo_blok">
        <table width="100%">
            <tr>
                <td>
                    <font class="memo_blok_name"><? echo $result['name']; ?> |</font> 
                    <font class="memo_blok_date"><? echo $result['date']; ?></font>
                </td>
                <td width="20">
                    <img src="images/close.png" width="20" id="deleteBTN_<? echo $result['id']; ?>" />
                </td>
            </tr>
        </table>
        <p class="memo_blok_TXT">
            <? echo $result['msg']; ?>
        </p>
    </div>
<? } ?>

<div id="confirm" class="confirm">
    <table width="100%">
        <tr>
            <td align="center">Are you sure?</td>
        </tr>
        <tr>
            <td align="center">
                <a href="memo_delete.php?id=1" class="noLine">
                    <img src="images/Yes.png" width="50" id="deleteYes" />
                </a>
                <img src="images/No.png" width="50" id="deleteNo" />
            </td>
        </tr>
    </table>
</div>

The CSS:

.confirm {
    width:100%;
    height:100px;
    position:fixed;
    top:-100px;
    left:0px;
    background-color:#3c3c3b;
    font-family: 'Abel', sans-serif;
    font-size:24px;
    color:#fefefe;
}

The script:

<script> 
$(document).ready(function(){
    $("#deleteBTN").click(function(){
        $("#confirm").animate({top: '0px'});
    });

    $("#deleteNee").click(function(){
        $("#confirm").animate({top: '-100px'});
    });
});

Answer 1

Change the close image:

<img src="images/close.png" width="20" id="deleteBTN_<? echo $result['id']; ?>" />

To this so it will have a data-id attribute (also you can change than the id attribute to class and leave out the id number):

<img src="images/close.png" width="20" class="deleteBTN" data-id="<? echo $result['id']; ?>" />

Remove the value of href from a.noLine like this <a href="" class="noLine"> and in your javascript code then put the data attribute's value on the end of href attribute like this:

 $(".deleteBTN").click(function(){
     var msgId = $(this).data('id');
     $("#confirm").animate({top: '0px'});
     var $deleteBtn = $("#confirm").find('.noLine');
     $deleteBtn.attr('href','memo_delete.php?id='+msgId);
 });