jQuery Add Group Fields

Question

I have the following jQuery - Addservico

var countServs = $("#countServs").val();
var table = $("#servicosTable");
var modelo = $("#servicoModelo").html();
modelo = replaceAll(modelo, 'COUNT', countServs);
table.append(modelo);

$("[name='servicos[" + countServs + "].cidade']").typeahead(null, {
    displayKey: function(d) {
        return d.cidade;        
    },
    source: cidadesSource.ttAdapter(),
    cache:true
});

$("[name='servicos[" + countServs + "].bairro']").typeahead(null, {
    displayKey: function(d) {
        return d.nome;        
    },
    source: bairrosSource.ttAdapter(),
    cache:true
});
countServs++;
$("#countServs").val(countServs);

I have the following table

<input type="hidden" id="countServs" value="1" >

<div style="display: none;">
    <table>
        <tbody id="servicoModelo">
            <tr id="servico_COUNT">
                <td style="line-height: 10px !important;">
                     <input class="input-small" style="width: 200px !important;" type="text" name="resp_nome[]" value="" placeholder="Nome Completo">
                </td>
                <td style="line-height: 10px !important; font-size: 12px !important;">
                    <input class="input-small" style="width: 35px !important;" type="text" name="resp_telefoneddd[]" value="" placeholder="DDD">
                    <input class="input-small" style="width: 100px !important;" type="text" name="resp_telefone[]" value="" placeholder="Telefone">
                </td>
                <td style="line-height: 10px !important; font-size: 12px !important;">
                    <input class="input-small" style="width: 230px !important;" type="text" name="resp_email[]" value="" placeholder="E-mail">
                </td>
                <td style="line-height: 10px !important;  font-size: 12px !important;">
                    <select class="input-small" name="resp_setor[]" id="resp_setor[]" style="width: 150px;">
                        <? foreach($this->data['parametroSetor'] as $setor){ ?>
                        <option value="<? echo $setor->idParametro; ?>"><? echo $setor->parametro; ?></option>
                        <? } ?>
                    </select>
                </td>
                <td>
                    <button class="btn" type="button" onclick="removerServico(COUNT)" style="padding: 3px; width: 32px !important;"><i class="icon-trash"></i></button>
                </td>
            </tr>
            <tr id="servico_baixo_COUNT">
            <td colspan="5">
                <input class="input-small" style="width: 35px !important;" type="text" name="resp_telefoneddd2[]" value="" placeholder="DDD">
                <input class="input-small" style="width: 147px !important; margin-right: 15px;" type="text" name="resp_telefone2[]" value="" placeholder="Telefone">

                <input type="checkbox" name="resp_confemail1[]" id="1_COUNT">&nbsp;&nbsp;<label for="1_COUNT" style="text-align: left; ">Financeiro</label>
                <input type="checkbox" name="resp_confemail2[]" id="2_COUNT">&nbsp;&nbsp;<label for="2_COUNT" style="text-align: left">Operacional</label>
                <input type="checkbox" name="resp_confemail3[]" id="3_COUNT">&nbsp;&nbsp;<label for="3_COUNT" style="text-align: left">Marketing</label>
                <input type="checkbox" name="resp_confemail4[]" id="4_COUNT">&nbsp;&nbsp;<label for="4_COUNT" style="text-align: left">Retorno</label>
            </td>
        </tr>
        </tbody>
    </table>
</div>

When adding, COUNT always stays 1, how to make it auto-increment? Thank you all.

Answer 1

Well, over time I went to find a solution and found the next one and it worked... if it works for anyone..:

var countServs = $("#countServs").val();
var table = $("#servicosTable");
var modelo = $("#servicoModelo").html();
modelo = replaceAll(modelo, 'COUNT', countServs);
table.append(modelo);

countServs++;
$("#countServs").val(countServs);