'use strict';

jQuery.noConflict();
jQuery(document).ready(function ($) {
    //usage 
    $('#whole_page').formToJson('.result-json-output');

});

<td
                                                    style="color: inherit; fill: inherit; border: 1px solid rgb(233, 233, 231); position: relative; vertical-align: top; min-width: 200px; max-width: 200px; min-height: 32px;">
                                                    <div class="dailyos-table-cell">
                                                      <div class="dailyos-table-cell-text" spellcheck="true"
                                                        placeholder=" " data-content-editable-leaf="true"
                                                        style="max-width: 100%; width: 100%; white-space: pre-wrap; word-break: break-word; caret-color: rgb(55, 53, 47); padding: 7px 9px; background-color: transparent; font-size: 14px; line-height: 20px; min-height: 1em; color: rgb(55, 53, 47); -webkit-text-fill-color: rgba(55, 53, 47, 0.4);"
                                                        <section id="12am_input" contenteditable="true"></div>
                                                    </div>
                                                  </td>
                                                  <div
                                    style="display: flex; flex-direction: column; min-width: 0px; margin-left: 8px; width: 100%;">
                                    <div spellcheck="true" placeholder="Type something…"
                                      data-content-editable-leaf="true"
                                      style="max-width: 100%; width: 100%; white-space: pre-wrap; word-break: break-word; caret-color: rgb(55, 53, 47); padding-left: 2px; padding-right: 2px;"
                                      <section id="content_input" contenteditable="true">Content Consumption
                                      </div>