Text boxes in graphical view

I am doing a web development project.

I have a product page which has 2 buttons. By pressing one button, a text box gets displayed and the user types in the value and after saving it the text box should disappear. When the user clicks the button again, the text box gets displayed and the user can
type a new value(like text1, text2...).

There is second button, when it is clicked it displays the text box with the value that the user typed in the text boxes(text1,text2...). when we click the second button, it should display text1, text2... in a graphical view and the user can edit or delete the text boxes and rearrange the text boxes and save the online work in his webpage for future use.

I am a learner in web development.It would be very helpful if anybody could help me with code.
I am doing in Html, Css, Javascript, Php and Mysql.

So, what do you have done so far?

What you have described does not require advanced skills, but definitely not for someone just starting out.

To tell you the truth, I have just made 2 buttons with one boxes for one button and 5 boxes for the second button.

I could just transfer the typed text box value of the first button to the first box of the second button after I click the button. After that I could not think or code. But I do not know how to code for this.

I have done webpages in the current project that handle registration, login and logout with validation and session varaiables. I do not know whether the above product page which I have stated is easy or tough compare to what I have done.

But It would be really helpful if you could help me in this.

The one and only thing which I am totally confused is that how can you make a graphical line from text1 to text2 to text3... and if the userwant to delete the text, he can delete for example text2 and now the text1 will have a graphical like with text3 and so on. i do not know how to do this.
This might be very simple code but as a learner, i do not have any knowledge how to do this.
if anybody has any idea about this, can you help me?

To draw lines, either use an image, or a <div> with CSS styled to be the proper width and background color.

As to the text changing, you need to use arrays to hold the data. Then, when an item is removed, you simply reload the page data using the array.