Create button inside table and change while onclick event

Question

I have a problem creating a button on the fly within its function. I've created a table perfectly in php but I don't know how to create a button inside php code using a function on each button.

Example 
ID              NAME            PRICE               ADD
1               STRAW            100                BUTTON 1
2               STRAWRE          300                BUTTON 2
3               STRAWTO          200                BUTTON 3

The button add is dynamically using looping inside the html table. and when I process a click on the button, then the id, name, and price item will be changed with the textbox and each textbox has an auto value using the old one, and button 1 will be added one button left button 1, or button 2, or button 3.

function cetakdata()
{
    if(is_array($_SESSION['pembelian']))
    {
    $total = "";
    echo "Here's your chart" . "<br>";
    $max = count($_SESSION['pembelian']);  
    $th1 = "<th>" . "No" . "</th>";
    $th2 = "<th>" . "Nama Barang" . "</th>";
    $th3 = "<th>" . "Harga Barang" . "</th>";
    $th4 = "<th>" . "Jumlah" . "</th>";
    $th5 = "<th>" . "Subtotal" . "</th>";
    $th6 = "<th>" . "Add Edit" . "</th>";
    echo "<table border=1>";
    echo "<tr>";
    echo $th1 ;
    echo $th2;
    echo $th3;
    echo $th4;
    echo $th5;
    echo $th6;

    echo "</tr>";
    for ($indexo = 0; $indexo < $max; $indexo++) {
   echo "<tr>";
   echo "<td>" . $indexo."</td>";
   echo "<td>" . $_SESSION['pembelian'][$indexo]['namabarang']."</td>";
   echo "<td>" . $_SESSION['pembelian'][$indexo]['hargabarang']."</td>";
   echo "<td>" . $_SESSION['pembelian'][$indexo]['jumlahbarang']."</td>";
   echo "<td>" . $_SESSION['pembelian'][$indexo]['subtotal']."</td>";
   echo "<td>" .THIS IS HOW I PUT THE BUTTON ON THE FLY DELETE BUTTON."</td>";
    $total += $_SESSION['pembelian'][$indexo]['subtotal'];
   echo "</tr>";
    }
    echo "TOTAL BELANJA = ". $total;
    echo "</table>";
    }else
    {
        echo "Chart is still Empty";
    }
}

This is the code. When the button created I the other td will be changing into textbox with its value and after user finished edit user can also save it within the save button beside the add button but the save button will be appeared when user click on edit button like the image above :

Answer 1

just add like a normal button in the last td

<button id="1" name="button">BUTTON 1</button>

and for action do with some jquery function

$(function(){
    $('button[name=button]').click(function(){
        var id= $(this).attr("id");
        //some action here
        //ex:
        window.location.href="ex.php?id="+id;
        //or an ajax fungtion
    });
});

oh... may be you can do with this

<script>
$(function(){
    $('button[name=button]').click(function(){
        var id= $(this).attr("id");
        //some action here
        //ex:
        window.location.href="ex.php?id="+id;
        //or an ajax fungtion
    });
});
</script>
<?php
$query = mysql_query("select * from barang");
echo '<table><tr><th>Nama Barang</th><th>Harga Barang</th><th>Stok</th><th>Action</th></tr>';
while($data = mysql_fetch_array($query)){
    echo "<tr>
        <td>".$data['nama_barang']."</td>
        <td>".$data['harga_barang']."</td>
        <td>".$data['stok_barang']."</td>
        <td><button id=".$data['kode_barang']." name=\"button\">Edit</button></td>
    </tr>";
}
echo '<table>';
?>

EDITED

changes this <td><button id=".$data['kode_barang']." name=\"button\">Edit</button></td>

to

<td><button id=".$data['kode_barang']." name=\"button\" style=\"display:none\">Edit</button><button id=".$data['kode_barang']." name="..$data['kode_barang'].">Edit2</button></td>

and on the javascript just add modify just like this

$(function(){
    $('button[name=button]').click(function(){
        var id= $(this).attr("id");
        $("button[name="+id+"]").show();
        //some action here
        //ex:
        window.location.href="ex.php?id="+id;
        //or an ajax fungtion
    });
});