how to make edittable table using js or jquery?

Question

i want to create its content edittable but only first row is editing.

this is not working for other row instead of first any way to do it reply fast

<script>
$("#edit_foo").click(function(){
   $("#text1").hide(); 
   $("#text2").hide();
   $("#text3").hide();
   $("#text4").hide();
});
</script>
<div class="table-responsive">
<table class="table table-bordered table-hover">
    <tr>
        <th>Website</th>
        <th>phone</th>
        <th>Email</th>
        <th>Facebook_URL</th>
        <th>Action</th>
    </tr>
                <?php foreach($footertables as $post)
{
?>
    <tr>
        <td><span id="text1"><?php echo $post->website?></span><input type="text" value="<?php echo $post->website?>" class="form-control"/></td>
        <td><span id="text2"><?php echo $post->phone?></span><input type="text" value="<?php echo $post->phone?>" class="form-control"/></td>
        <td><span id="text3"><?php echo $post->Email?></span><input type="text" value="<?php echo $post->Email?>" class="form-control"/></td>
        <td><span id="text4"><?php echo $post->facebook?></span><input type="text" value="<?php echo $post->facebook?>" class="form-control"/></td>
        <td><a href="#" class='btn btn-primary' id="edit_foo"><span>&#x270D;</span>Edit</a> <a href="<?php echo base_url().'dashboard_controller/deletefooter/'.$post->id;?>" class='btn btn-danger delete'><span>&#9003;</span> Delete</a></td>
    </tr>
                <?php
}
?>
    </table>
    </div>

Answer 1

您能实现吗： https : //editor.datatables.net/examples/inline-editing/simple