Duplicating controls

[Christian]

HI,
I made an interface with some controls, from Kendo. It's a number, textbox and dropdownlist. What it does it's create many copies of itself by the press of the "+" button and delete a row by the press of it's "-" button.

Here's the code:

{% extends "saloons/templates/base.html" %}

{% from "ui/forms/macro.html" import wtform %}

{% block content %}

  <form method="POST" action="">

    <table>

        <tr>

            <td>{{ form.order_date.label }}</td>

            <td>{{ form.order_date }}</td>

        </tr>

    </table>

  <div id="grid-users"  class="grid-content" style="text-align: center; width: 100%!important">

      <table id="grid">

    <thead>

      <tr>

        <th data-field="number" style="text-align: center">Nro.</th>

        <th data-field="item" style="text-align: center">Articulo</th>

        <th data-field="staff" style="text-align: center">Usuario</th>

        <th data-field="button" style="text-align: center">Añadir/Remover</th>

      </tr>

    </thead>

    <tbody id="pedidos">

      <tr>

        <td>1.</td>

        <td>{{ form.item }}</td>

        <td>{{ form.staff }}</td>

        <td><button type="button" id="add_textbox">+</button></td>

      </tr>

    </tbody>

      </table>

      <center>

     <div class="buttons">{{ form.save }}</div>

      </center>

  </div>

  </form>

<script type="text/javascript">

    $(function() {

        $("#save").attr('class','k-button');

        $("#c0").attr('class', 'k-input');

        var sel = $("#t0").clone();

        var sel2 = $("#c0").clone();

        var i = 1;

        var data = "{{ inventory }}".replace("[", "").replace("]", "");

                var a = data.split(",");

                for(j=0;j<a.length;j++)

                {

                  if(j == 0){

                   a[j] = a[j].substring(2,a[j].length -1);

                  }

                  else

                  {

                    a[j] = a[j].substring(3,a[j].length -1);

                  }

                }

        $("#add_textbox").attr('class', 'k-button');

        $("#add_textbox").live('click', function() {               

            i++;

            $("#pedidos").append('<tr>' +

                        '<td>'+ i +'. </td>' +

            '<td id="c'+ i +'"></td>' +

            '<td id="t'+ i +'"></td>' +

            '<td><button type="button" rel="del" class="k-button">-</button></td>' +

            '</tr>');

            $(sel2).attr('id',"tc"+i);

            $(sel).attr('id',"ts"+i);

            $(sel2).appendTo("#c"+i);

            $(sel).appendTo("#t"+i);

            $("#tc"+i).css('width', 180);

            $("#tc"+i).kendoAutoComplete({

                   dataSource: a

                        });

            sel = $(sel).clone();

            sel2 = $(sel2).clone();

            $("#ts"+i).css('width', 270);

            $("#ts"+i).kendoDropDownList();

        });

                 

                $("button[rel=del]").live('click', function() {

                   $(this).parent().parent().remove();

                   i--;

                    

                   var a2 = 0;

                   $("#pedidos tr").each(function(i){

                      a2++;

                      $(this).find("td:first").html(a2);                     

                   });                  

        });

                 

                 

     

        $("#order_date").kendoDatePicker({

             min: new Date(),

             value: new Date(),

                     format: "dd/MM/yyyy"

          });

        $("#order_date").attr('disabled','disabled');

         

        $("#grid").kendoGrid({

          height: 460,

          sortable: false,

          columns: [{field:"number", width:40},

                {field:"item", width:40},

                {field:"staff", width:80, editor: function(container, options){

                  }},

                {field:"button", width:40}]

 

          });

        $("#t0").css('width', 270);

        $("#t0").kendoDropDownList();

         

        $("#c0").css('width', 180);

        $("#c0").kendoAutoComplete({

                    dataSource: a

                });

        });

</script>

{% endblock %}

Happens that at some point when you start deleting rows, some dropdowns and textboxes are assigned to the wrong rows. At first I thought that it was because some ids didn't match when making the recount in the minus button, but I already tried that.

Can you help on this one, please?