Channel Form and Matrix - not saving Data

Question

I'm building out a multiple page channel form which was working fine until I got to where I need to use a Grid/Matrix field. I was unable to find documentation on how to customize the look of Grid so when with Matrix based on this Meta Q article.

I saw a similar issue on StackExchange Here, but the fix/hack there doesn't work, or rather I was unable find the specific item to change. That is likely due to me being on EE 2.92.

---UPDATE---

Removed original code and adding in new code as I'm closer to a solution

---UPDATE---

My current code minus the js from Meta Q is below:

My Somewhat simplified code is below. With this code if I edit an entry in the CP the matrix cells display the values. However when I save the entry all data for the matrix is deleted. Starting fresh no data is saved. The full matrix has 7 cells but I'm working only with the first cell for now until I get it to save.

{exp:channel:entries channel="tool" url_title="{pre_seg_4}" entry_id="{pre_entry_id}" status="not foo"}

{exp:channel:form 
    channel="tool"
    include_jquery="yes"
    include_assets="yes"
    return="tool/page/6/URL_TITLE/ENTRY_ID"
    status="pending"
    url_title="{pre_seg_4}"
    entry_id="{pre_entry_id}"
    author_id="2"
    logged_out_member_id="2"
    require_entry="yes"

    } {!--error_handling="inline"--}


    {!--using matrix fields in channel form
        http://themetaq.com/articles/bring-matrix-data-editing-to-the-front-end
        --}

    <div class="fields" id="sortable">

        {tool_experience2}
        <div class="field"><!--THIS IS A MATRIX ROW-->

            <input class="new_row_id" type="hidden" name="tool_experience2[row_order][]" value="row_id_{row_id}">


            <div class="form-group">
                <label for="company[row_id_{row_id}][col_id_1]">Company</label>
                <input type="text" class="form-control" name="company[row_id_{row_id}][col_id_1]" value="{company}">
            </div>

            <span class="delete_row">[x]</span>

        </div><!--end field row-->
        {/tool_experience2}

    </div>

    <div class="buttons">
      <input id="new" type="button" value="add row">       
      {!--<input type="submit" value="Submit">--}
    </div>


  <button type="submit" class="btn btn-default">Submit</button>
{/exp:channel:form}
{exp:channel:entries}

And source view for the matrix rows on the front end

<div class="fields" id="sortable">

                <div class="field"><!--THIS IS A MATRIX ROW-->

                    <input class="new_row_id" type="hidden" name="tool_experience2[row_order][]" value="row_id_2">


                    <div class="form-group">
                        <label for="company[row_id_2][col_id_1]">Company</label>
                        <input type="text" class="form-control" name="company[row_id_2][col_id_1]" value="">
                    </div>




                    <span class="delete_row">[x]</span>

                </div><!--end field row-->

            </div>

Really need to be able to customize the look of either a Matrix or Grid field. Any thoughts on how to get this fixed/working?