javascriptImplentation for Product Line Items

Scenario :

Create a  VF page   as given below

1.When you click on AddMore button four more should be added to the pageBlockTable

2.When you enter the quantity and price value it should automatically calculate the  total value and display the total

When we click on add button on the row new row should be created below the row selected

 with same values

When you click on del button that row should be deleted  from the pageblockTable

Code:  Class :javascriptExam

public class JavaScriptExam {

    public List<Product> products{set;get;}

    public Integer rowNo{set;get;}

    public javascriptExam(){

                products=new List<Product>();

        addProducts();

    }

    public void addProducts(){

        for(Integer i=0;i<=3;i++){

            Product p=new Product();

            p.total=0;

            products.add(p);

        }

    }

    public void addRow(){

        Product p=products.get(rowNo);

        if(rowno+1<products.size())

        products.add(rowno+1,p);

        else

        products.add(p);

    }

    public void removeRow(){

        products.remove(rowNo);

    }

    public class product{

        public string pname {set;get;}

        public Integer quant {set;get;}

        public Decimal price {set;get;}

        public Decimal total {set;get;} 

    }

}

Visualforce page:

<apex:page controller="JavaScriptExam" id="page">

    <script>

                function find(myid){

                var rowid=myid.split(':');

            document.getElementById('page:fm:pb:pbt:'+rowid[4]+':sec').value=rowid[4];

        }

                function show(myid){

                var rowid=myid.split(':');

            var quant=document.getElementById('page:fm:pb:pbt:'+rowid[4]+':quant').value;

            var price=document.getElementById('page:fm:pb:pbt:'+rowid[4]+':price').value;

            var total=quant*price;

            document.getElementById('page:fm:pb:pbt:'+rowid[4]+':total').value=total;

        }

    </script>

    <apex:form id="fm">

                <apex:pageBlock title="Product List" id="pb">

                <apex:pageBlockTable value="{!products}" var="a" id="pbt">

                <apex:column headerValue="Product Name">

                    <apex:inputText value="{!a.pname}" id="pname" />

                </apex:column>

                <apex:column  headerValue="Quantity">

                    <apex:inputText value="{!a.quant}"  size="4" id="quant" onchange="show(this.id)" />

                </apex:column>

                <apex:column headerValue="Price">

                    <apex:inputText value="{!a.price}" size="4" id="price" onchange="show(this.id)" />

                </apex:column>

                <apex:column headerValue="Total">

                    <apex:inputText value="{!a.total}" id="total" />

                </apex:column>

                <apex:column headerValue="Action">

                    <apex:commandButton value="Add"  id="b1" onclick="find(this.id)" action="{!addRow}" /> 

                    <apex:commandButton  value="Del" id="b2" onclick="find(thid.id)"  action="{!removeRow}"/>

                    <apex:inputHidden  value="{!rowno}" id="sec"/>

                </apex:column>

            </apex:pageBlockTable>

            <apex:pageBlockButtons location="bottom">

                <apex:commandButton value="AddMore" action="{!addProducts}"  />

             </apex:pageBlockButtons>

        </apex:pageBlock>

    </apex:form>

</apex:page>