How do I change the format of dynamically created textboxes

See more:

Javascript

HTML

So I have some code that creates a set of textboxes and i need the information to be grouped by section so each section will have 6 answers that need to be grouped together. Then when you add another row those responses need to be grouped together here is the current output

Previous Lighthouse Order #: 1

7

Previous WO Type: 2

8

Previous WO Resolution: 3

9

Previous WO was Resolved By: 4

10

Previous WO Resolution Comments: 5

11

Previous Y6 WO Referral Reason: 6

12

Current output

Here is the code

<div class="row displayNone Reppy6a">
    <div class="cell" style="text-align: left;">Previous Lighthouse Order #: </div>
    <div class="cell" style="text-align: left;">Previous WO Type: </div>
    <div class="cell" style="text-align: left;">Previous WO Resolution: </div>
<div class="cell" style="text-align: left;">Previous WO was Resolved By: </div>
    <div class="cell" style="text-align: left;">Previous WO Resolution Comments: </div>
    <div class="cell" style="text-align: left;">Previous Y6 WO Referral Reason: </div>
    <div class="row"><input id="PbtnAdd" type="button" value="Add Previous LHWO" ></div>
</div>
<div class="row displayNone Reppy6a">
    <div class="cell" id="PLH" onchange="PreLHWO()"></div>
    <div class="cell" id="PWO" onchange="PreLHWO()"></div>
    <div class="cell" id="PRes" onchange="PreLHWO()"></div>
    <div class="cell" id="PTech" onchange="PreLHWO()"></div>
    <div class="cell" id="PCom" onchange="PreLHWO()"></div>
    <div class="cell" id="PY6" onchange="PreLHWO()"></div>
    <!--Textboxes will be added here 
    <div class="cell"><input id="btnGet" type="button" value="Compile" /></div>-->
</div>

JavaScript

function GetDynamicTextBox1(value) {
    return '<div class="cell"> '
}
function GetDynamicTextBox2(value) {
    return '<div class="cell"> '
}
function GetDynamicTextBox3(value) {
    return '<div class="cell"> '
}
function GetDynamicTextBox4(value) {
    return '<div class="cell"> '
}
function GetDynamicTextBox5(value) {
    return '<div class="cell"> '
}
function GetDynamicTextBox6(value) {
    return '<div class="cell"> '
}
function PreLHWO() {
    var values1 = "";
        $("input[name=DynamicTextBox1]").each(function () {
            values1 += $(this).val() + "\n";
        });
    var PNum = "Previous Lighthouse Order #: " + values1;
    var values2 = "";
        $("input[name=DynamicTextBox2]").each(function () {
            values2 += $(this).val() + "\n";
        });
    var PType = "Previous WO Type: " + values2;
    var values3 = "";
        $("input[name=DynamicTextBox3]").each(function () {
            values3 += $(this).val() + "\n";
        });
    var PRes = "Previous WO Resolution: " + values3;
    var values4 = "";
        $("input[name=DynamicTextBox4]").each(function () {
            values4 += $(this).val() + "\n";
        });
    var PTech = "Previous WO was Resolved By: " + values4;
    var values5 = "";
        $("input[name=DynamicTextBox5]").each(function () {
            values5 += $(this).val() + "\n";
        });
    var PCom = "Previous WO Resolution Comments: " + values5;
    var values6 = "";
        $("input[name=DynamicTextBox6]").each(function () {
            values6 += $(this).val() + "\n";
        });
    var PY6 = "Previous Y6 WO Referral Reason: " + values6;

    document.getElementById("PWOTotal").innerHTML= PNum + "\r" + PType + "\r" + PRes + "\r" + PTech + "\r" + PCom + "\r" + PY6 ;
}

I would like the output to be

Previous Lighthouse Order #: 1

Previous WO Type: 2

Previous WO Resolution: 3

Previous WO was Resolved By: 4

Previous WO Resolution Comments: 5

Previous Y6 WO Referral Reason: 6

Previous Lighthouse Order #: 7

Previous WO Type: 8

Previous WO Resolution: 9

Previous WO was Resolved By: 10

Previous WO Resolution Comments: 11

Previous Y6 WO Referral Reason: 12

What I have tried:

nothing that has worked it was all trying different ways to dynamically create textboxes