Iterative CFS

HTML

<table class="chartFieldString">
    <thead>
        <tr>
            <th>Line</th>
            <th>Chartfield string</th>
            <th class="fin">Debit</th>
            <th class="fin">Credit</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td width="100%"><div class="cfs"><input type="hidden" name="cfsId"></input></div></td>
            <td><input type="text" class="debit"></td>
            <td><input type="text" class="credit"></td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th colspan="2">TOTAL</th>
            <th>$0.00</th>
            <th>$0.00</th>
        </tr>
    </tfoot>
<table>
   
<!-- Just templates below this -->
<table class="template">
    <tbody>
        <tr id="cfsTemplate-row">
            <td>${rowNum}</td>
            <td><div class="cfs"></div></td>
            <td><input type="text" class="debit"></td>
            <td><input type="text" class="credit"></td>
        </tr>
    </tbody>
</table>
<div id="cfsTemplate-new" class="template">
    <form><div class="new">
        <div class="section">
            <ul>
                <li>
                    <label>Nickname</label>
                    <select class="nickname editable">
                        <option selected>Choose one</option>
                        <option>ITWRG</option>
                        <option>ITTRG</option>
                        <option>ITCG</option>
                        <option>ABCDEFGHIJ</option>
                    </select>
                </li>
                <li>
                    <label>Speedtype</label>
                    <input class="speedtype editable"></input>
                </li>
            </ul>
        </div>
    </div></form>
</div>
    
<div id="cfsTemplate-readonly" class="template">
    <form><div class="noneditable">
        <div class="section">
            <ul>
                <li class="action">
                    <button type="button" class="openEdit">
          ...

CSS

.template {
    display:none;
}
select {
    background-color: white;
}
div.buttons { 
    margin-bottom: 0.5em; 
}
div.buttons button[type="button"] { 
    background-color: #d3fbb7; 
    background: -moz-linear-gradient(#d3fbb7, #8bb56e); 
    background: -ms-linear-gradient(#d3fbb7, #8bb56e); 
    background: -o-linear-gradient(#d3fbb7, #8bb56e); 
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#d3fbb7), to(#8bb56e)); 
    background: -webkit-linear-gradient(#d3fbb7, #8bb56e); 
    background: linear-gradient(#d3fbb7, #8bb56e); 
    box-shadow: 0 0 8px 2px #dbf9c5 inset, 0 1px 0 0 #eeeeee; 
    border: 1px solid #999966; 
    font-size: 1em; 
    font-weight: bold; 
    color: #336600; 
    padding: 0.15em 0.75em; 
    border-radius: 0.75em;
}
div.buttons button[type="button"]:hover,
div.buttons button[type="button"]:focus { 
    color: white; 
    background-color: #a6d585; 
    background: -moz-linear-gradient(#7da164, #a6d585); 
    background: -ms-linear-gradient(#7da164, #a6d585); 
    background: -o-linear-gradient(#7da164, #a6d585); 
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#7da164), to(#a6d585)); 
    background: -webkit-linear-gradient(#7da164, #a6d585); 
    background: linear-gradient(#7da164, #a6d585); 
    box-shadow: 0 0 8px 2px #7fa663 inset, 0 1px 0 0 #eeeeee; 
    border: 1px solid #bdbdbd; 
    border-top: 1px solid transparent; 
}
div.buttons button[type="reset"] { 
    background-color: transparent; 
    border: 0; 
    margin: 1em 2em; 
    text-decoration: underline; 
    color: #747679; 
    cursor: pointer; 
}

.chartFieldString { 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 0.75em; 
    border: 0; 
    border-collapse: collapse;
    background-color: #FFC;
    color: #336;
}
.chartFieldString th {
    font-weight: bold;
}
.chartFieldString thead th { 
    text-align: left;
    color: #747679; 
}
.chartFieldString thead th.fin { 
    text-align: center; 
}
.chartFieldString tbody td { 
   ...

JavaScript

var speedtypes = [
    {
    value: "ITMS110000",
    label: "ITMS110000 - IT-WEB DEVELOPMENT",
    descr: "IT-WEB DEVELOPMENT"},
{
    value: "ITMS110100",
    label: "ITMS110100 - IT-WD CONTRACTORS",
    descr: "IT-WD CONTRACTORS"},
{
    value: "ITMS110101",
    label: "ITMS110101 - IT-WD CONTRACTORS",
    descr: "IT-WD CONTRACTORS"},
{
    value: "ITMS110102",
    label: "ITMS110102 - IT-WD CONTRACTORS",
    descr: "IT-WD CONTRACTORS"},
{
    value: "ITMS110103",
    label: "ITMS110103 - IT-WD CONTRACTORS",
    descr: "IT-WD CONTRACTORS"},
{
    value: "ITMS110104",
    label: "ITMS110104 - IT-WD CONTRACTORS",
    descr: "IT-WD CONTRACTORS"},
{
    value: "ITMS110105",
    label: "ITMS110105 - IT-WD CONTRACTORS",
    descr: "IT-WD CONTRACTORS"},
{
    value: "ITMS110106",
    label: "ITMS110106 - IT-WD CONTRACTORS",
    descr: "IT-WD CONTRACTORS"},
{
    value: "ITMS110107",
    label: "ITMS110107 - IT-WD CONTRACTORS",
    descr: "IT-WD CONTRACTORS"},
{
    value: "ITMS110108",
    label: "ITMS110108 - IT-WD CONTRACTORS",
    descr: "IT-WD CONTRACTORS"},
{
    value: "ITMS110109",
    label: "ITMS110109 - IT-WD CONTRACTORS",
    descr: "IT-WD CONTRACTORS"},
{
    value: "ITMS110110",
    label: "ITMS110110 - IT-WD CONTRACTORS",
    descr: "IT-WD CONTRACTORS"},
{
    value: "ITMS110111",
    label: "ITMS110111 - IT-WD CONTRACTORS",
    descr: "IT-WD CONTRACTORS"},
{
    value: "ITMS110112",
    label: "ITMS110112 - IT-WD CONTRACTORS",
    descr: "IT-WD CONTRACTORS"},
{
    value: "ITMS110110A",
    label: "ITMS110110 - IT-WD CONTRACTORS",
    descr: "IT-WD CONTRACTORS"},
{
    value: "ITMS110111A",
    label: "ITMS110111 - IT-WD CONTRACTORS",
    descr: "IT-WD CONTRACTORS"},
{
    value: "ITMS110112A",
    label: "ITMS110112 - IT-WD CONTRACTORS",
    descr: "IT-WD CONTRACTORS"},
{
    value: "ITMS110110B",
    label: "ITMS110110 - IT-WD CONTRACTORS",
    descr: "IT-WD CONTRACTORS"},
{
    value: "ITMS110111B",
    label: "ITMS110111 - IT-WD CONTRACTORS",
   ...