[Solved] Cannot clone div properly if inside form tag

I am working on my custom html editor for my codeigniter project. Where I can also preview code which is below editor as typing which works fine.

The problem I am having is if I wrap the panel in a form tag the preview does not work properly it goes away for some reason.

But when I do not have form tag it works fine.

Codepen Code View

Codepen Full View

I need to be able to make it work to be able to use the form but not sure why preview div will not work properly with form tag,

I have commented out the form tag on codepen.

Any suggestions and examples on how to solve this cheers.

There's only one rule - please don't tell anyone to go and read the manual.  Sometimes the manual just SUCKS!

An easy fix/work a round could be to use a separate form with only hidden fields. When you press the save button let jQuery copy the values from the visible fields to the hidden fields and post that hidden form.

An easy fix/work a round could be to use a separate form with only hidden fields. When you press the save button let jQuery copy the values from the visible fields to the hidden fields and post that hidden form.

I have found out why it is causing problem because when I trigger or click on code_view it for some reason submits the form but need it to not do that.

There's only one rule - please don't tell anyone to go and read the manual.  Sometimes the manual just SUCKS!

An easy fix/work a round could be to use a separate form with only hidden fields. When you press the save button let jQuery copy the values from the visible fields to the hidden fields and post that hidden form.

Found out issue is because i did not have type="button" in the button code_view etc

There's only one rule - please don't tell anyone to go and read the manual.  Sometimes the manual just SUCKS!