title: How to access existing tr and fill its td using json from ajax success without generating new row
body: <p>I am using <a href="https://couchcms.com/" rel="nofollow noreferrer">CouchCMS</a>. In CouchCMS there is a concept of repeatable regions. This in fact generates tables and displays the repeatable contents in it.</p>
  <p>I have the repeatable region defined as:</p>
  <pre><code>&lt;cms:repeatable name=&quot;item_detail&quot; label=&quot;Item Detail&quot; order=&quot;10&quot; &gt;
      
      &lt;cms:editable name=&quot;product&quot; label=&quot;Product&quot; type=&quot;dropdown&quot; opt_values=&quot;Select =- | &lt;cms:pages masterpage='product/product.php' order='asc' orderby='product_name'&gt;&lt;cms:show product_name /&gt;&lt;cms:if '&lt;cms:not k_paginated_bottom /&gt;'&gt;|&lt;/cms:if&gt;&lt;/cms:pages&gt;&quot; order=&quot;1&quot; /&gt;
      &lt;cms:editable name=&quot;product_hsn&quot; label=&quot;HSN&quot; type=&quot;text&quot; order=&quot;2&quot; /&gt;hsn,qty,price,gst,amount
      &lt;cms:editable name=&quot;product_qty&quot; label=&quot;Quantity&quot; type=&quot;text&quot; order=&quot;3&quot; /&gt;
      &lt;cms:editable name=&quot;product_price&quot; label=&quot;Price&quot; type=&quot;text&quot; order=&quot;4&quot; /&gt;
      &lt;cms:editable name=&quot;product_tax&quot; label=&quot;Tax&quot; type=&quot;text&quot; order=&quot;5&quot; /&gt;
      &lt;cms:editable name=&quot;product_line_total_amount&quot; label=&quot;Amount&quot; type=&quot;text&quot; order=&quot;6&quot; /&gt;
  
  &lt;/cms:repeatable&gt;  
  </code></pre>
  <p>Where the editables are the regions where we can fill in the data by bounding them to the respective textboxes/ selects, etc.</p>
  <p>Now What I am trying to do is:</p>
  <ol>
  <li>Select a value from the dropdown of the editable named &quot;product&quot;.</li>
  <li>When an option is selected, an AJAX is called. This AJAX in turn returns some data.</li>
  <li>I am able to get the data, console log it or display it in a div or a table.</li>
  </ol>
  <p>But what I really want to do is:</p>
  <ol>
  <li>Since the repeatable region is shown is the form of a table, the  exists. I want to be able to just get the AJAX JSON data displayed in the  of the existing data.</li>
  <li>If you see the editables above, a table exists with each editables' select/textbox in the , there are:</li>
  </ol>
  <ul>
  <li>product (select, for product name)</li>
  <li>product_hsn (textbox,  with  to be created and be filled by AJAX JSON)</li>
  <li>product_qty (textbox,  with  to be created but needs to be blank)</li>
  <li>product_price (textbox,  with  to be created and be filled by AJAX JSON)</li>
  <li>product_tax (textbox,  with  to be created and be filled by AJAX JSON)</li>
  <li>product_line_total_amount (textbox,  with  to be created but needs to be blank)</li>
  </ul>
  <p>Now the repeatable region creates a structure as follows ( for the above defined repeatable region):</p>
  <div class="s-table-container">
  <table class="s-table">
  <thead>
  <tr>
  <th>Product</th>
  <th>HSN</th>
  <th>Quantity</th>
  <th>Price</th>
  <th>Tax</th>
  <th>Amount</th>
  <th>Delete</th>
  </tr>
  </thead>
  </table>
  </div>
  <pre><code>&lt;div&gt;
      &lt;p class=&quot;addRow&quot; id=&quot;addRow_f_item_detail&quot;&gt;&lt;a&gt;Add a Row&lt;/a&gt;&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  <p>I can add new rows also right out of the box when using repeatable regions. If one observes ids and the names have a zero [0] this keeps on incrementing as one would add the new rows.
  The script helping in this above code generation is:</p>
  <pre><code>if ( !window.COUCH ) var COUCH = {};
      $(function(){
          $('table.rr &gt; tbody').sortable({
              axis: &quot;y&quot;,
              handle: &quot;.dg-arrange-table-rows-drag-icon&quot;,
              helper: function (e, ui) { 
                  // https://paulund.co.uk/fixed-width-sortable-tables
                  ui.children().each(function() {                
                      $(this).width($(this).width());
                  });
              return ui;
          },
          update: function( event, ui ){
              var row = ui.item;
              var tbody = $( row ).closest( 'tbody' );
              tbody.trigger('_reorder');
          },
          start: function( event, ui ){    
              var row = ui.item;
              row.trigger('_reorder_start');
          },
          stop: function( event, ui ){
              var row = ui.item;
              row.trigger('_reorder_stop');
          },
      });
  });
  COUCH.rrInit = function( field_id, default_row ){
      var $field = $('#'+field_id);
      $field.tableGear({addDefaultRow:default_row, stackLayout:1});
      $field.on('click', '.col-actions .add-row', function(){
          var $this = $(this);
          var row_id = $this.attr('data_mosaic_row');
          var add_btn = $('#addRow_'+field_id+' a');
          add_btn.trigger(&quot;click&quot;, [row_id]);
      });
  }
  COUCH.t_confirm_delete_row = &quot;Delete this row?&quot;;
  COUCH.t_no_data_message = &quot;- No Data -&quot;;
  </code></pre>
  <p>Just in case if required this is my AJAX code, using which I am able to add a new  but it is in a New  while I want the  to be appended to the same  that contains the existing repeatable regions.
  AJAX CODE:</p>
  <pre><code>$(document).on('change','select',function() {
      var data = &quot;&quot;;
      $.ajax({
          type:&quot;GET&quot;,
          url : &quot;&lt;cms:show k_site_link /&gt;generate/quotation-ajax.php&quot;,
          data: 
              &quot;select_id=&quot;+$(this).val(),
          async: false
      }).done(function(data) {
          console.log(data);
          var trHTML = '';
          $.each(data.product_details, function (i, item) {
              trHTML += &quot;&lt;tr id='f_item_detail-&quot; + i + &quot;'&gt;&quot; + '&lt;td class=&quot;editable k_element_product_hsn&quot;&gt;&lt;div style=&quot;position:relative;&quot;&gt;&lt;input type=&quot;bound&quot; name=&quot; f_item_detail[0][product_hsn]&quot; id=&quot;f_item_detail-[0]-product_hsn&quot; class=&quot;form-control&quot; value=&quot;' + item.product_hsn + '&quot;/&gt;&lt;/div&gt;&lt;/td&gt;' +
              // '&lt;td style=&quot;position:relative;&quot;&gt;&lt;input type=&quot;bound&quot; name=&quot; f_item_detail[0][product_price]&quot; id=&quot;f_item_detail-[0]-product_price&quot; class=&quot;form-control&quot; value=&quot;' + item.product_price + '&quot;/&gt;&lt;/td&gt;' +
              // '&lt;td style=&quot;position:relative;&quot;&gt;&lt;input type=&quot;bound&quot; name=&quot; f_item_detail[0][product_tax]&quot; id=&quot;f_item_detail-[0]-product_tax&quot; class=&quot;form-control&quot; value=&quot;' + item.product_tax + '&quot;/&gt;&lt;/td&gt;' +
              '&lt;/tr&gt;';
          });
          $('#f_item_detail').append(trHTML);
      })
  });
  </code></pre>
  <p>And my AJAX file has the code:</p>
  <pre><code>&lt;?php require_once('../couch/cms.php'); ?&gt;
  &lt;cms:set selected_product=&quot;&lt;cms:gpc 'select_id' method='get' /&gt;&quot; scope=&quot;global&quot; /&gt;
  &lt;cms:content_type 'application/json'/&gt;
  &lt;cms:template title=&quot;Quotation AJAX&quot; hidden='1' parent=&quot;_generate_&quot; /&gt;
      {
          &quot;product_details&quot;: 
          [
              &lt;cms:pages masterpage='product/product.php' custom_field=&quot;product_name=&lt;cms:show selected_product /&gt;&quot; &gt;
              {
                  &quot;product_hsn&quot;: &quot;&lt;cms:addslashes&gt;&lt;cms:show product_hsn/&gt;&lt;/cms:addslashes&gt;&quot;,
                  &quot;product_price&quot;: &quot;&lt;cms:addslashes&gt;&lt;cms:show min_selling_cost/&gt;&lt;/cms:addslashes&gt;&quot;,
                  &quot;product_tax&quot;: &quot;&lt;cms:addslashes&gt;&lt;cms:show tax_on_purchase/&gt;&lt;/cms:addslashes&gt;&quot;   
              }&lt;cms:if &quot;&lt;cms:not k_paginated_bottom/&gt;&quot;&gt;,&lt;/cms:if&gt;
              &lt;/cms:pages&gt;
          ]
      }
  &lt;?php COUCH::invoke(); ?&gt;
  </code></pre>
  <p>What I am looking for:
  Add the AJAX success JSON values to the respective textboxes in the existing ,  and  rather than adding a new  or  or . I am unable to set the correct jQuery. Any help would be really appreciated.</p>
  <p>Thanks in advance.
  Regards!
  @Swati:
  Full HTML in this <a href="https://jsfiddle.net/yeksqfmo/" rel="nofollow noreferrer">fiddle</a> (with some changes in the AJAX part, which partially works and outputs what I want to achieve. The value is put into the textbox but for each new row the same textbox value is updated from the first row, if i could update the textbox values row wise it would be great)</p>
  <p><strong>EDIT #1</strong>
  I have used your code (@Swati) as follows and yes it works fine (to an extent).</p>
  <pre><code>&lt;script type=&quot;text/javascript&quot;&gt;
      $(document).ready(function(){
          $(&quot;#f_item_detail-0-product&quot;).select2();
          $('input#f_item_detail-0-product_hsn').attr('readonly', true).addClass(&quot;form-control&quot;);
          $('input#f_item_detail-0-product_qty').attr('onchange', 'line_total()');
          $('input#f_item_detail-0-product_price').attr('onchange', 'line_total()');
          $('input#f_item_detail-0-product_tax').attr('readonly', true).addClass(&quot;form-control&quot;);
          $('input#f_item_detail-0-line_tax_amount').attr('readonly', true).addClass(&quot;form-control&quot;);
          $('input#f_item_detail-0-product_line_total_amount').attr('readonly', true).addClass(&quot;form-control&quot;);
      });
      
      var counter = 0;
      $(document).ready(function() {
          $(&quot;.addRow&quot;).click(function(){
              counter++;
              $(&quot;#f_item_detail-&quot; + counter + &quot;-product&quot;).select2();
          });
      });
  
      $(document).on('change','select',function() {
          var data = &quot;&quot;;
          var i = 0;
          var indexs = $(this).closest(&quot;tr&quot;).index();//get index no
          console.log(indexs);
  
          $.ajax({
              type:&quot;GET&quot;,
              url : &quot;&lt;cms:show k_site_link /&gt;generate/quotation-ajax.php&quot;,
              data: 
                  &quot;select_id=&quot;+$(this).val(),
              async: false
          }).done(function(data) {
              $('#f_item_detail-' + indexs + '-product_hsn').val(data.product_details[i].product_hsn).attr('readonly', true).addClass(&quot;form-control&quot;);
  
              $('#f_item_detail-' + indexs + '-product_qty').attr('onchange', 'line_total()');
  
              $('#f_item_detail-' + indexs + '-product_price').val(data.product_details[i].product_price).attr('onchange', 'line_total()');
  
              $('input#f_item_detail-' + indexs + '-product_tax').val(data.product_details[i].product_tax).attr('readonly', true).addClass(&quot;form-control&quot;);
  
              $('#f_item_detail-' + indexs + '-line_tax_amount').attr('readonly', true).addClass(&quot;form-control&quot;);
  
              $('#f_item_detail-' + indexs + '-product_line_total_amount').val(data.product_details[i].product_line_total_amount).attr('readonly', true).addClass(&quot;form-control&quot;);
          });
      });
              
      function line_total(){
          var line_qty = $('input#f_item_detail-' + indexs + '-product_qty').val();
          var line_tax = $('input#f_item_detail-' + indexs + '-product_tax').val();
          var line_cost =  $('input#f_item_detail-' + indexs + '-product_price').val();
          var line_tax_amount = parseFloat(((line_cost * line_tax)/100) * line_qty).toFixed(2);
          var result = parseFloat((+line_qty * +line_cost) + +line_tax_amount).toFixed(2);
          $('#f_item_detail-' + indexs + '-line_tax_amount').val(line_tax_amount).attr('hidden',true);
          $('#f_item_detail-' + indexs + '-product_line_total_amount').val(result);
      }
  
  &lt;/script&gt;
  </code></pre>
  <p>It is solving the issue of going back and editing the product and hence updating the line item value as you had suggested.</p>
  <p>But if you see the <strong>function line_total()</strong> it breaks. And the total are not calculated. What do you suggest? How can we use the <strong>indexs</strong> value or something else. Also, I would be greatful if you could also suggest me how can we display the GST Amount total and Amount Total at the end with a Grand Total (GST Amount Total + Amount Total), I would be really greatful.</p>
  <p>I am not good with javascript or jQuery at all.</p>