print sum of user editable column in to separate table using jquery

I want to be able to sum up the column with the header production of the table which will be created and edited by the user. I'd like to put that answer in the table that I created above the table which holds the production numbers. Here is what I have so far:

Jquery/java

 $("button.agentPerson").on("click", function() {
        var $newAgent = $('input.agentPerson').val();

        if ( $('input.agentPerson').val() !== "") {
         $("div.commissionInfo").append("<div><h2>"+$newAgent+"</h2><table class='totals, "+$newAgent+"'><tr><th>Total Production</th></tr><tr><td class='noChange' contentEditable='false'>0</td></tr></table></div><br/><div><table class="+$newAgent+"><tr class='header'><th>Address</th><th>Contract Date</th><th>Production</th><th>Commission</th></tr><button class="+$newAgent+">New Deal for"+" "+$newAgent+"</button></table><br/></div>");
       $("select.addToThis").append($('<option>', {
            value: $newAgent,
            text: $newAgent,
          }));

        }
    });



//Here I get all of the new Buttons for the agents to add deals to their specific agent.



    $("body").on("click", "button", function(event) {


        $(this).parent().find("table").append("<tr><td>#1</td><td>3/5/1986</td><td class='production'>0</td><td class='commission'>3</td></tr>");
        });  

HTML

<div class="newPerson">
    <p>What would you like the agent's name to be?</p>
    <input type="text" class="agentPerson">
        <button class="agentPerson">New Agent</button>



</div>

I want to make sure that the production totals go to the specific table for that "agent" as I am calling them.

What I am lacking here is the ability to add the specific column and put it in the table above. Once I understand that I think I will be able to add and do other math and add other columns as I see fit.

I tried to create a fiddle for it to show the example, but could not get that to work either.

Thanks!