onclick function for button in jquery is not working

See more:

jQuery

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>
</pre>
script:

<pre><pre lang="text">
<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

    });
}

})
})
<script>

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.
P/S: Sorry because I didn't describe error for this code.
Thank you in advance!