Salesforce CRUD Operation using GRID pattern

Code of Visualforce page:-

<apex:page controller="StuCrudOperation">

<script

  src="https://code.jquery.com/jquery-3.7.1.js"

  integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4="

  crossorigin="anonymous"></script>

  <apex:form >

  <apex:pageBlock >

 <apex:inputText id="paramText"/>

 <apex:commandButton value="click" oncomplete="findData()" /> 

</apex:pageBlock>

      <apex:pageBlock id="anyName">

        <apex:pageblocktable value="{!allRec}" var="a">

       

              <apex:column value="{!a.id}" id="stuid"/>

               <apex:column value="{!a.Name}" id="stuname" />

               <apex:column value="{!a.fees__c}" id="stufees"/>

               <apex:column ><a href="" class="edit">Edit</a></apex:column>

               <apex:column ><a href="#" class="del">Delete</a></apex:column>

          </apex:pageblocktable>

          <apex:pageblocktable value="{!allStus}" var="obj">

              <apex:column headerValue="Name">

                  <apex:inputText value="{!obj.Id}" id="txtid"  />

                  <apex:inputtext value="{!obj.Name}" id="txtname"/>

              </apex:column>

              <apex:column headerValue="fees">

                  <apex:inputtext value="{!obj.fees__c}" id="txtfee"/>

                 

                 

              </apex:column>

             

          </apex:pageblocktable>

          

          <apex:commandButton value="addRow" action="{!addRowMethod}" rerender="anyName"/>

          <apex:commandButton value="removeRow" action="{!removeRowMethod}"/>

          

          <apex:commandButton value="save" action="{!saveMethod}"/>

          <apex:commandButton value="edit"  action="{!editMethod}"/>

          <apex:commandButton value="delete" action="{!deleteMethod}" reRender="anyName"/>

          <apex:commandButton value="Clear" action="{!clearMethod}" reRender="anyName"/>

      </apex:pageBlock>

  </apex:form>

    <script>

    $(document).ready(function(){

     $(".del").click(function(){

           var currentRow=$(this).closest("tr"); 

         

         var tid=currentRow.find("td:eq(0)").find("span:first").text(); 

         var name=currentRow.find("td:eq(1)").find("span:first").text(); 

         var fees=currentRow.find("td:eq(2)").find("span:first").text(); 

        

       

        document.getElementById('j_id0:j_id2:anyName:j_id10:0:txtid').value=tid;

        document.getElementById('j_id0:j_id2:anyName:j_id10:0:txtname').value=name;

        document.getElementById('j_id0:j_id2:anyName:j_id10:0:txtfee').value=fees;

        

      

    

     });

      $(".edit").click(function(){

           var currentRow=$(this).closest("tr"); 

         

         var tid=currentRow.find("td:eq(0)").find("span:first").text(); 

         var name=currentRow.find("td:eq(1)").find("span:first").text(); 

         var fees=currentRow.find("td:eq(2)").find("span:first").text(); 

        

       

        document.getElementById('j_id0:j_id2:anyName:j_id10:0:txtid').value=tid;

        document.getElementById('j_id0:j_id2:anyName:j_id10:0:txtname').value=name;

        document.getElementById('j_id0:j_id2:anyName:j_id10:0:txtfee').value=fees;

        

      

    

     });

    });

    

    /*function findData()

    {

   

     //  var name=document.getElementById('paramText').value;

        var tid= document.getElementById('j_id0:j_id1:anyName:j_id4:0:stuid').textContent;

       var name= document.getElementById('j_id0:j_id1:anyName:j_id4:0:stuname').textContent;

       var fees= document.getElementById('j_id0:j_id1:anyName:j_id4:0:stufees').textContent;

       document.getElementById('j_id0:j_id1:anyName:j_id9:0:txtid').value=tid;

       document.getElementById('j_id0:j_id1:anyName:j_id9:0:txtname').value=name; 

       document.getElementById('j_id0:j_id1:anyName:j_id9:0:txtfee').value=fees; 

       

        alert('hello' + name);

       

    }*/

    </script>

</apex:page>

Code of Apex Class:-

public class StuCrudOperation {

 public List<stu__c> allStus{get;set;}

 public List<stu__c> allRec{get;set;}

 public stu__c coll;

    public string myid{get;set;}

   

    public StuCrudOperation()

    {

        allRec = [select Id,Name,fees__c from stu__c];

        allStus = new List<stu__c>();

        stu__c acc1 = new stu__c();

        allStus.add(acc1);

    }

   

    public void addRowMethod(){

       stu__c acc1 = new stu__c();

        allStus.add(acc1);

    }

        

    public void removeRowMethod(){

        integer count = allStus.size();

        allStus.remove(count-1);

    }

    public void saveMethod(){

        insert allStus;

    }

     public void editMethod(){

       coll = [SELECT Id, Name, fees__c FROM stu__c WHERE Id = :allStus[0].Id];

       coll.Name = allStus[0].Name;

       coll.fees__c  = allStus[0].fees__c;

       System.debug('Id is '+allStus[0].Id);

       update coll;

    }

     public void deleteMethod(){

        coll = [SELECT Id FROM stu__c WHERE Id = :allStus[0].Id];

         System.debug('Id is '+allStus[0].Id);

        delete coll;

    }

    public void clearMethod(){

         integer finalCount = allStus.size();

         allStus.clear();

         for(integer i=0;i<finalCount;i++){

            stu__c acc1 = new stu__c();

            allStus.add(acc1);

            

        }

            

        }

    

     

}