JQUERY DYNAMIC CONTENT HTML FORMS
<p>Does anybody know where I can post code examples that I can show to potential employers?
Is there any</p>

<p>Below is some code I did today for a (hopefully opensource &amp; free) service I and trying to develop. </p>

<p>This is just a test page with some dummy variables inserted. I am running PHP, HTML, CSS3, and Jquery on this. </p>

<p>The Page creates an invoice/estimate template.</p>

<pre><code>&lt;!DOCTYPE html&gt;
 &lt;html&gt;
&lt;head&gt;
    &lt;title&gt;&lt;/title&gt;
    &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
    &lt;link rel="stylesheet" type="text/css" href="css/style.css" &gt;
    &lt;link rel="stylesheet" type="text/css" href="css/estimates_and_invoices.css" &gt;

    &lt;script src="js/jquery-min.js" type="text/javascript"&gt;&lt;/script&gt;
    &lt;script src="js/jquery-ui.js" type="text/javascript"&gt;&lt;/script&gt;           

    &lt;script&gt;
        var DEBUG = false;
        function addItem() {
            $(createItemRow()).insertAfter($('#particularsTable .itmRow:last'),     function() {
            });
            initializeOpts();
            initializeInputs();
            calculateTotal();
        }

        function delRow(el) {
            if ($('#particularsTable .itmRow').length === 1) {
                $('#particularsTable .itmRow').eq(0).fadeOut(700, function() {
                    $('#particularsTable .itmRow').eq(0).remove();
                    $(createItemRow()).insertAfter($('#particularsTable tr:first'));
                    initializeOpts();
                    initializeInputs();
                    calculateTotal();
                });

            } else {
                $(el).parent().parent().parent().fadeOut(500, function() {
                    $(el).parent().parent().parent().remove();
                    for (i = 0; i &lt; $('#particularsTable .itmRow').length; i++) {
                        $('#particularsTable .itmRow ').eq(i).children('.itemNum:first').html(i + 1);
                    }
                    initializeOpts();
                    initializeInputs();
                    calculateTotal();
                });
            }
        }

        function initializeOpts() {
            $(".opts").unbind("click");
            $(".opts").click(function() {
                if ($(this).attr('title') === 'delete') {
                    delRow($(this));
                } else if ($(this).attr('title') === 'edit') {
                    alert("DO EDIT MODE");
                }
            });
        }

        function initializeInputs() {
            $('#particularsTable .calc_input').unbind("change");
            $('#particularsTable .calc_input').bind('change', function() {
                calculateTotal();
            });
        }

        function IsNumeric(input) {
            var RE = /^-{0,1}\d*\.{0,1}\d+$/;
            return (RE.test(input));
        }

        function createItemRow() {
            str = "&lt;tr class='itmRow'&gt;";
            str += "&lt;td class=\"itm_options\"&gt;";
            str += "&lt;a href='#patricularsTable' onclick='editRow();'&gt;&lt;img src='images/edit.png'  title='edit' class='opts' alt='edit' /&gt;&lt;/a&gt;";
            str += "&lt;a href='#patricularsTable' onclick='delRow();'&gt;&lt;img src='images/remove.png'  title='delete' class='opts' alt='delete' /&gt;&lt;/a&gt;";
            str += "&lt;/td&gt;";
            str += "&lt;td class='itemNum'&gt;" + ($('#particularsTable .itmRow').length + 1) + "&lt;/td&gt;";
            str += "&lt;td class='item'&gt;&lt;input type='text' name='item' /&gt;&lt;/td&gt;";
            str += "&lt;td class='desc'&gt;&lt;input type='text' name='desc' /&gt;&lt;/td&gt;";
            str += "&lt;td class='itemCost'&gt;&lt;input type='text' name='itemCost' value='0' class='calc_input' /&gt;&lt;/td&gt;";
            str += "&lt;td class='qty'&gt;&lt;input type='text' name='qty' value='0' class='calc_input'/&gt;&lt;/td&gt;";
            str += "&lt;td class='taxApplied'&gt;&lt;input type='checkbox' name='taxApplied'  class='calc_input'/&gt;&lt;input type='hidden'  name='tax_ipt' class='calc_input' value='0' /&gt;&lt;/td&gt;";
            str += "&lt;td class='discount'&gt;&lt;input type='checkbox' name='discount' class='calc_input'/&gt;&lt;input type='hidden' name='discount_ipt' class='calc_input' value='0' /&gt;&lt;/td&gt;";
            str += "&lt;td class='total'&gt;0.00&lt;/td&gt;";
            str += "&lt;/tr&gt;";
            return str;
        }

        function calculateTotal() {
            var tr = $('#tax_rate').text();
            var dr = $('#discount_rate').text();
            var subTotal = 0;
            var discTotal = 0;
            var taxTotal = 0;

            if (DEBUG) {
                console.log("\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n");
                console.error("----------------------------------------------------------------------------------");
                console.log("itemName" + "\t\t\t" + "sub_total" + "\t\t\t" + "tax_payable" + "\t\t\t" + "discount_applied" + "\t\t\t" + "Final_SubTotal" + "\t\t\t" + "Discount Total" + "\t\t\t" + "Tax Total");
            }

            for (i = 0; i &lt; $('#particularsTable .itmRow').length; i++) {
                var sub_total = $('#particularsTable .calc_input[name="itemCost"]').eq(i).val() * $('#particularsTable .calc_input[name="qty"]').eq(i).val();
                var tax_payable = $('#particularsTable .calc_input[name="taxApplied"]').eq(i).is(":checked") ? (sub_total * tr / 100) : 0;
                var discount_applied = $('#particularsTable .calc_input[name="discount"]').eq(i).is(":checked") ? (sub_total * dr / 100) : 0;

                if (DEBUG)
                    var itemName = $('#particularsTable input[name="item"]').eq(i).val();
                //Enter the totals for each row 

                $('#particularsTable .calc_input[name="discount_ipt"]').eq(i).val(discount_applied);
                $('#particularsTable .calc_input[name="tax_ipt"]').eq(i).val(tax_payable);
                $('#particularsTable .total').eq(i).text(sub_total.toFixed(2));

                //add up the grand totals
                taxTotal += tax_payable;
                discTotal += discount_applied;
                subTotal += sub_total;

                var t = $('#particularsTable .calc_input[name="taxApplied"]').eq(i).is(":checked") ? "y" : "n";
                var d = $('#particularsTable .calc_input[name="discount"]').eq(i).is(":checked") ? "y" : "n";

                if (DEBUG)
                    console.log(itemName + " =\t\t\t\t\t" + sub_total.toFixed(2) + "\t\t\t\t" + t + ":" + tax_payable.toFixed(2) + "\t\t\t\t\t\t" + d + ":" + discount_applied.toFixed(2) + "\t\t\t\t\t" + subTotal.toFixed(2) + "\t\t\t\t\t" + discTotal.toFixed(2) + "\t\t\t\t" + taxTotal.toFixed(2));
            }

            //assign the grand totals
            $('#final_sub_total').text((subTotal).toFixed(2));
            $('#final_discount').text((discTotal).toFixed(2));
            $('#final_tax').text((taxTotal).toFixed(2));
            $('#final_total').text((subTotal + taxTotal - discTotal).toFixed(2));
        }

        $(document).ready(function() {
            $(createItemRow()).insertAfter($('#particularsTable tr:first'));
            $('#patricularsTable').find('itemNum').text("1");
            initializeOpts();
            initializeInputs();
        });
    &lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div id="cssmenu"&gt;
        &lt;ul&gt;
            &lt;li&gt;&lt;a href="index.php"&gt;&lt;span&gt;Home&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
            &lt;li class="has-sub"&gt;&lt;a href="clients.php?mode=l"&gt;&lt;span&gt;Clients&lt;/span&gt;&lt;/a&gt;
                &lt;ul&gt;
                    &lt;li&gt;&lt;a href="clients.php?mode=l"&gt;&lt;span&gt;List All&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="clients.php?mode=s"&gt;&lt;span&gt;Search&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="clients.php?mode=c"&gt;&lt;span&gt;New Client&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
            &lt;/li&gt;
            &lt;li class="has-sub"&gt;&lt;a href="contacts.php?mode=l"&gt;&lt;span&gt;Contacts&lt;/span&gt;&lt;/a&gt;
                &lt;ul&gt;
                    &lt;li&gt;&lt;a href="contacts.php?mode=l"&gt;&lt;span&gt;List All&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="contacts.php?mode=s"&gt;&lt;span&gt;Search&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="contacts.php?mode=c"&gt;&lt;span&gt;New Contact&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
            &lt;/li&gt;
            &lt;li class="has-sub"&gt;&lt;a href="estimates.php?mode=l"&gt;&lt;span&gt;Estimates&lt;/span&gt;&lt;/a&gt;
                &lt;ul&gt;
                    &lt;li&gt;&lt;a href="estimates.php?mode=l"&gt;&lt;span&gt;List All&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="estimates.php?mode=s"&gt;&lt;span&gt;Search&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="estimates.php?mode=c"&gt;&lt;span&gt;New Estimate&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
            &lt;li class="has-sub"&gt;&lt;a href="invoices.php?mode="&gt;&lt;span&gt;Invoices&lt;/span&gt;&lt;/a&gt;
                &lt;ul&gt;
                    &lt;li&gt;&lt;a href="invoices.php?mode=l"&gt;&lt;span&gt;List All&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="invoices.php?mode=s"&gt;&lt;span&gt;Search&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="invoices.php?mode=t"&gt;&lt;span&gt;Convert Estimate&lt;/span&gt;&lt;/a&gt;   &lt;/li&gt;
                    &lt;li&gt;&lt;a href="invoices.php?mode=c"&gt;&lt;span&gt;New Invoice&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
            &lt;li&gt;&lt;a href="logout.php"&gt;&lt;span&gt;Logout&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/div&gt; &lt;!-- nav --&gt;
    &lt;div id="content"&gt;
        &lt;div id="sheet"&gt;
            &lt;div id="header"&gt;

                &lt;div id="doc_top_right"&gt;
                    &lt;h4&gt;REF# : E-201300026&lt;/h4&gt;
                    &lt;h4&gt;DATE : 06-05-2013&lt;/h4&gt;
                &lt;/div&gt;
                &lt;div id='title'&gt;    &lt;h2&gt;ESTIMATE&lt;/h2&gt; &lt;/div&gt;                    

                &lt;div id='trade_logo'&gt;&lt;img src="images/trade_logos/test_logo.jpg" alt="your trade logo" &gt;&lt;/div&gt;


            &lt;/div&gt;
            &lt;br&gt;
            &lt;div id='parties'&gt;
                &lt;div id='customer'&gt;
                    &lt;div class='heading'&gt;Customer&lt;/div&gt;
                    &lt;div class='details'&gt;
                        &lt;p&gt;Client Contact&lt;/p&gt;
                        &lt;p&gt;&lt;span class='larger'&gt;Client&lt;/span&gt;&lt;/p&gt;
                        &lt;p&gt;Address1, Address2, Address3,  Address4 &lt;/p&gt;
                        &lt;p&gt;Ph: 086 403 3333 &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; Fax: 01 3223222 &lt;/p&gt;
                        &lt;p&gt;email@client.com &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; Web: www.company.com&lt;/p&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
                &lt;div id="user_info" &gt;
                    &lt;div class='heading'&gt;Service Provider&lt;/div&gt;
                    &lt;div class='details'&gt;
                        &lt;p&gt;User Name&lt;/p&gt;
                        &lt;p&gt;&lt;span class='larger'&gt;Trade Name&lt;/span&gt;&lt;/p&gt;
                        &lt;p&gt;Address1, Address2, Address3, Address4&lt;/p&gt;
                        &lt;p&gt;Ph: 086 403 3333 &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; Fax: 01 3223222 &lt;/p&gt;
                        &lt;p&gt;email@client.com &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; Web: www.company.com&lt;/p&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
            &lt;br&gt;

            &lt;div id='general_desc'&gt;
                &lt;div class='heading'&gt;Job Description&lt;/div&gt;
                &lt;div class='details'&gt;
                    &lt;p&gt;
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                    &lt;/p&gt;
                &lt;/div&gt;
            &lt;/div&gt;

            &lt;br&gt;

            &lt;div id='particulars'&gt;
                &lt;table id='particularsTable'&gt;
                    &lt;tr&gt;&lt;th class='optsCol'&gt;&lt;/th&gt;&lt;th&gt;#&lt;/th&gt;&lt;th class='item'&gt;Item&lt;/th&gt;&lt;th class='desc'&gt;Description&lt;/th&gt;&lt;th class='itemCost'&gt;Item Cost&lt;/th&gt;&lt;th class='qty'&gt;Quantity&lt;/th&gt;&lt;th class='taxApplied'&gt;Tax&lt;/th&gt;&lt;th class='discount'&gt;Discount&lt;/th&gt;&lt;th class='total_th'&gt;Total&lt;/th&gt;&lt;/tr&gt;
                    &lt;tr&gt;&lt;td colspan="8" class='accum'&gt;Sub Total: &lt;/td&gt;&lt;td id='final_sub_total'&gt;0.00&lt;/td&gt;&lt;/tr&gt;
                    &lt;tr&gt;&lt;td colspan="8" class='accum'&gt;Discount: &lt;span id='discount_rate'&gt;10&lt;/span&gt;% of Sub Total&lt;/td&gt;&lt;td id='final_discount'&gt;0.00&lt;/td&gt;&lt;/tr&gt;
                    &lt;tr&gt;&lt;td colspan="8" class='accum'&gt;Tax: &lt;span id='tax_rate'&gt;23&lt;/span&gt;%&lt;/td&gt;&lt;td id='final_tax'&gt;0.00&lt;/td&gt;&lt;/tr&gt;
                    &lt;tr&gt;&lt;td colspan="8" class='final_accum'&gt;Total: &lt;/td&gt;&lt;td id='final_total'&gt;0.00&lt;/td&gt;&lt;/tr&gt;
                &lt;/table&gt;

                &lt;a href='#addItm' id='addItm' onclick='addItem();'&gt;&lt;img  src='images/Add.png' alt='Add Item' /&gt;Add Item&lt;/a&gt;
            &lt;/div&gt;
            &lt;br&gt;
            &lt;div id='tsandcs'&gt;
                &lt;div class='heading'&gt;Terms and Conditions&lt;/div&gt;
                &lt;div class='details'&gt;
                    &lt;p&gt;
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                    &lt;/p&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;   
    &lt;/div&gt;
    &lt;div id='test'&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
