How can I insert multiple page contents in the page layout properly?

Question

I wanted to create 4 columns on the page layout. These 4 columns are of page contents.
After creating new web page based on that page layout, I attempted to enter 4 different inputs on all 4 columns.
Then, the result (from all columns) becomes the same.
Image - edit the web page based on 4 columns page layout:
Image - after edit & save:
How can I insert multiple page contents in the page layout properly?

Answer 1

First, I copied the HTML snippet for the Page Content on Sharepoint's Design Manger. The code of Page Content HTML snippet is shown below:
<div data-name="Page Field: Page Content">
<!--CS: Start Page Field: Page Content Snippet-->
<!--SPM:<%@Register Tagprefix="PageFieldRichHtmlField"
Namespace="Microsoft.SharePoint.Publishing.WebControls"
Assembly="Microsoft.SharePoint.Publishing, Version=15.0.0.0,
Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
<!--MS:<PageFieldRichHtmlField:RichHtmlField
FieldName="f55c4d88-1f2e-4ad9-aaa8-819af4ee7ee8" runat="server">-->
<!--PS: Start of READ-ONLY PREVIEW (do not modify)-->
<div id="ctl02_label" style="display:none">Page Content</div>
<div id="ctl02__ControlWrapper_RichHtmlField" class="ms-rtestate-field"
style="display:inline" aria-labelledby="ctl02_label"><div align="left"
class="ms-formfieldcontainer"><div class="ms-formfieldlabelcontainer"
nowrap="nowrap"><span class="ms-formfieldlabel"
nowrap="nowrap">Page Content</span></div>
<div class="ms-formfieldvaluecontainer"><div class="ms-rtestate-field">
Page Content field value. Lorem ipsum dolor sit incididuntet dolore.</div>
</div></div></div><!--PE: End of READ-ONLY PREVIEW-->
<!--ME:</PageFieldRichHtmlField:RichHtmlField>-->
<!--CE: End Page Field: Page Content Snippet-->
</div>
After I published the page layout, I found the code for Page Content from its ASPX page. The code is shown below:
<div data-name="Page Field: Page Content">
<PageFieldRichHtmlField:RichHtmlField FieldName="f55c4d88-1f2e-4ad9-aaa8-819af4ee7ee8" runat="server"/></div>
So, I attempted to create 4 columns by using 4 HTML snippets of Page Content on the same page layout. The page layout is generated from HTML file to ASPX file.
Then I edited some parts in ASPX page layout:
<asp:Content runat="server" ContentPlaceHolderID="PlaceHolderMain">
<table>
<tr>
<td style="width:70px;">&nbsp;</td>
<td style="width:250px; text-align:right;">
<div data-name="Page Field: Page Content">
<PageFieldRichHtmlField:RichHtmlField FieldName="f55c4d88-1f2e-4ad9-aaa8-819af4ee7ee8" runat="server"/>
</div>
</td>
<td style="width:40px;">&nbsp;</td>
<td style="width:200px;">
<div data-name="Page Field: Page Content">
<PageFieldRichHtmlField:RichHtmlField FieldName="f55c4d88-1f2e-4ad9-aaa8-819af4ee7ee8" runat="server"/>
</div>
</td>
<td style="width:25px;">&nbsp;</td>
<td style="width:200px;">
<div data-name="Page Field: Page Content">
<PageFieldRichHtmlField:RichHtmlField FieldName="f55c4d88-1f2e-4ad9-aaa8-819af4ee7ee8" runat="server"/>
</div>
</td>
<td style="width:25px;">&nbsp;</td>
<td style="width:200px;">
<div data-name="Page Field: Page Content">
<PageFieldRichHtmlField:RichHtmlField FieldName="f55c4d88-1f2e-4ad9-aaa8-819af4ee7ee8" runat="server"/>
</div>
</td>
<td style="width:175px;">&nbsp;</td>
</tr>
</table>
</asp:Content>
The 4 columns for Page Contents appeared on the web page when I created new page using that page layout. But the problem is that all 4 columns displayed the same result from 4th column.