Autoincrement of rows(id) in primefaces and row addition and deletion on basis of input

Question

** Requirements - Wanted to take the input text number and on click of add row button input number should be added in terms of rows

For Eg -

1. I am inserting 2 then there should be 2 rows added and in id column it should have 1 then on second row id as 2
2. Now if I add 5 as input then it should add 5 rows Along with the id from 1-5 and then if I change it to 3 then from 5 rows it should only display as 3 rows the 2 rows should be deleted **

//xhtml for table and button

<div class="col-12 md:col-4">
                        <div class="ui-inputgroup">
                           
                            <p:inputText placeholder="Id"/>
                             <p:commandButton value="Add row" process="@this" 
                                              action="#{dtAddRowView.onAddNew()}" oncomplete="PF('products1').addRow();"/>
                        </div>
                    
                    
                        <div class="card">
                       <p:dataTable id="products1" widgetVar="products1" var="product" value="#{dtAddRowView.products1}"
                            editable="true">

                            <p:column headerText="Id">
                                <p:cellEditor>
                                    <f:facet name="output"><h:outputText value="#{product.id}" /></f:facet>
                                    <f:facet name="input"><p:inputText id="modelInput" value="#{product.id}"
                                                                       style="width:100%"/></f:facet>
                                </p:cellEditor>
                            </p:column>

                            <p:column headerText="Name">
                                <p:cellEditor>
                                    <f:facet name="output"><h:outputText value="#{product.name}"/></f:facet>
                                    <f:facet name="input"><p:inputText value="#{product.name}" style="width:100%"
                                                                       label="Name"/></f:facet>
                                </p:cellEditor>
                            </p:column>

                          <p:column headerText="Price">
                                <p:cellEditor>
                                    <f:facet name="output"><h:outputText value="#{product.price}"/></f:facet>
                                    <f:facet name="input"><p:inputText value="#{product.price}" style="width:100%"
                                                                       label="Price"/></f:facet>
                                </p:cellEditor>
                          </p:column>
                        </p:dataTable>
                    </div>
                    </div>

//java logic to add new row

public void onAddNew() {
        
        Product newProduct = new Product((int) (Math.random() * 10000),  "New Bamboo Watch",
                100);
        products1.add(newProduct);

        FacesMessage msg = new FacesMessage("New Product added", String.valueOf(newProduct.getId()));
        FacesContext.getCurrentInstance().addMessage(null, msg);
    }

//Output view screenshot

Code output view

When user enter the input number the total number of rows should be added and when user enter 5 then 5 rows and later on he enters 3 rows it should display only 3 rows other 2 rows should be deleted