title: To get value of one particular row in a table and deletion of a row
body: <p>I used handlebars to render table with data with each having edit button . I need to know like, if the edit button in second row is clicked, how to fetch the values in that particular row.</p>
  
  <p>Html is this</p>
  
  <pre><code>  &lt;table class="table table-bordered"&gt;
      &lt;thead&gt;
      &lt;tr&gt;
          &lt;th&gt;Model&lt;/th&gt;
          &lt;th&gt;Brand&lt;/th&gt;
          &lt;th&gt;Year&lt;/th&gt;
          &lt;th&gt;Action&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;input class="form-control" id="modelname"&gt;&lt;/td&gt;
          &lt;td&gt;&lt;input class="form-control" id="brandname"&gt;&lt;/td&gt;
          &lt;td&gt;&lt;input class="form-control" id="yearname"&gt;&lt;/td&gt;
          &lt;td&gt;&lt;button class="btn btn-primary add"&gt;Add&lt;/button&gt;&lt;button class="btn btn-primary update"&gt;Update&lt;/button&gt;&lt;/td&gt;
      &lt;/tr&gt;
  
      &lt;/thead&gt;
      &lt;tbody class="product-list"&gt;
  
      &lt;/tbody&gt;
    &lt;/table&gt;
    &lt;/div&gt;
  
  &lt;script id="list-item" type="text/x-handlebars-template"&gt;
    {{#each this}}
      &lt;div class="list-item"&gt;   
        &lt;tr&gt;
            &lt;td&gt;{{ model }}&lt;/td&gt;
            &lt;td&gt;{{ brand }}&lt;/td&gt;
            &lt;td&gt;{{ year }}&lt;/td&gt;
            &lt;td&gt;&lt;button class="btn btn-info edit"&gt;Edit&lt;/button&gt;&amp;nbsp;&lt;button class="btn btn-danger delete"&gt;Delete&lt;/button&gt;&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/div&gt;
    {{/each}}  
  &lt;/script&gt;
  </code></pre>
  
  <p>And script is</p>
  
  <pre><code> var Product = Backbone.Model.extend({
  });
  
  var ProductList = Backbone.Collection.extend({
    model: Product
  });
  
  var ProductView = Backbone.View.extend({
    el: '.table-bordered',
    events: {
      'click .add': 'create',
      'click .edit':'edit',
      'click .update':'update',
      'click .delete':'delete'
    },
    initialize: function(){
     // this.model=new Product();
      this.collection = new ProductList();
      this.listenTo(this.collection, "add", this.render, this);
       this.listenTo(this.collection, "edit", this.render, this);
      this.listenTo(this.collection, "change", this.render, this);
      this.listenTo(this.model,"delete", this.render, this);
  
  
    },
  
    render: function(){
      var source   = $("#list-item").html();
      var template = Handlebars.compile(source);
      $('.product-list').html(template(this.collection.toJSON()))
    },
  
    create: function(){
      //var product = new Product();
      this.model=new Product();
  
      var modelname= document.getElementById('modelname').value;
      var brandname=document.getElementById('brandname').value;
      var yearname= document.getElementById('yearname').value;
  
      this.model.set({
          'model': modelname,
          'brand': brandname,
          'year': yearname
      })
      this.collection.add(this.model);
      $('#modelname').val("");
      $('#brandname').val("");
      $('#yearname').val("");
    },
    edit:function(e){
       var jsondata=this.model.toJSON();
       console.log(jsondata.model);
        $('#modelname').val(jsondata.model);
      $('#brandname').val(jsondata.brand);
      $('#yearname').val(jsondata.year);
  
    },
    update:function()
      {
         // var product = new Product();
         var modelname= document.getElementById('modelname').value;
    var brandname=document.getElementById('brandname').value;
    var yearname= document.getElementById('yearname').value;
          this.model.set({
        'model': modelname,
        'brand': brandname,
        'year': yearname
      })
         $('#modelname').val("");
      $('#brandname').val("");
      $('#yearname').val("");
      },
      delete:function()
      {
  
      console.log(JSON.stringify(this.model));
        this.model.destroy();
  
      }
  
  });
  
  var productView = new ProductView();
  </code></pre>
  
  <p>My problem is, on click on edit,only the last element in array of records is getting populated onto text box for editing. And even delete doesn't work . I ain't sure where i went wrong. Please rectify.</p>