javascript中的onclick功能按钮无法正常工作

I am a newbie in jquery, I have a stupid question for onclick function. Please help me. I have a table, when viewer click "Add new" button, I will using jquery add a row to existing table. In new row, there are 2 textbox to input data and a button to transfer data from textbox to php file. This is my code: html code:

<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />

<INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" />

<TABLE id="dataTable" width="350px" border="1">
    <thead>
        <td>No</td>
        <td>First name</td>
        <td>Last name</td>
    </thead>
<?php 

             include("functions/connect_db.php");
              $no=0;
    $sql="SELECT * FROM `fullnames`";
    $result=mysqli_query($conn,$sql) or die('Could not select Machine'.mysqli_error($conn));
    while ($set=mysqli_fetch_array($result,MYSQLI_ASSOC))  {
                    $no++;
        $first=$set['firstname'];
        $last=$set['lastname'];
 ?>
    <tbody>
     <tr>
     <td><?php echo $no; ?></td>
     <td><?php echo $first; ?></td>
     <td><?php echo $last; ?></td>
 </tr>
  <?php } ?>
    </tbody>
</TABLE>

script:

function addRow(tableID) {

        var table = document.getElementById(tableID);

        var rowCount = table.rows.length;
        var row = table.insertRow(rowCount);

        var cell1 = row.insertCell(0);
        cell1.innerHTML = rowCount ;


        var cell2 = row.insertCell(1);
        var element1 = document.createElement("input");
        element1.type = "text";
        element1.id="first_input_"+rowCount;
        cell2.appendChild(element1);


        var cell3 = row.insertCell(2);
       var element2 = document.createElement("input");
        element2.type = "text";
        element2.id="last_input_"+rowCount;
        cell3.appendChild(element2);


        var cell4=row.insertCell(3);
        var element3 = document.createElement('input');
        element3.setAttribute('type','button');
        element3.id="#button_"+rowCount;
        element3.className="butt_class";
        element3.value='Save';
        cell4.appendChild(element3);

    }

$(document).ready(function() {
$(".butt_class").click(function()
{
var ID=$(this).attr('id');
var first=$("#first_input_"+ID).val();
var last=$("#last_input_"+ID).val();
if(first.length>0 && last.length>0)
{

$.ajax({
type: "POST",
url: "add_new.php",
data: dataString,
cache: false

});
}

})
})

When I click to Save button in each row, nothing is happen. I tried by replace all click Save function with alert but there is not change. Pls help me. Thank you in advance!

click() does not work on dynamically generated elements. You can use on():

$(document).ready(function() {
    $("#dataTable").on('click', '.butt_class', function() {
        //...
    });
});

or you can set a function when creating the element:

element3.onclick= function() {
        //...
    };