Edit dialog

The button has been clicked. A window popped up with an edit field (i.e. a text field with loaded text). There are two buttons – Save and Cancel. Click save and the result of editing is saved. How to do something like this in javascript, jquery?

<?php
require_once "conf.php";
?>
<head>
<body> 
<?php
dbConnect();
$zapros=mysql_query("select * from spr_otdel") or die (mysql_error);
while ($row=mysql_fetch_array($zapros)){
echo "
<div class='panel' style='width:200px;'>
{$row['id']}  {$row['name']}<div class='selo' ><a href='#' class='btn-delete'></a> | <a href='#' class='edit'></a></div></div>";
}
?>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js'></script>
<script type="text/javascript"> 
$(document).ready(function () {
    $(".panel:even").addClass("alt");
    $(".panel .btn-delete").click(function () {
        alert("   ");
        $(this).parents(".panel").animate({
            backgroundColor: "#fbc7c7"
        }, "fast").animate({
            opacity: "hide"
        }, "slow")
        return false;
    });
    $(".panel.edit").click(function () {
        if (confirm("   ?")) {
            var s = prompt("  :");
            alert("   : " + s);
        } else {
            alert("    ");
        }
    });
});
</script>
<style type="text/css">
.panel {
    background: #ffffff;
    padding: 10px 20px 10px;
    position: relative;
    border-top: solid 1px #ccc
    }
.alt {
    background: #f5f4f4;
    }
.selo {
    font-size: 8pt;
    }
</style>
</body> 
</html>

This part doesn’t work

$(".panel.edit").click(function () {
    if (confirm("   ?")) {
        var s = prompt("  :");
        alert("   : " + s);
    } else {
        alert("    ");
    }
});

Answer 1, authority 100%

$(".panel.edit")=> $(".panel .edit")
And so, just in case: your piece of code does not send any data. Just a warning.