$(document).ready(function() {
  $('.zk_btn').click(function(e) {
    var pass_symbol= $('#' + lastid).val();
    var split_id = lastid.split("_");
    var nextindex = Number(split_id[1]) + 1;

    $.ajax({
      url:"record_count_3.php?pass_symbol=" + pass_symbol,
      method:"POST",
      success:function(data)
        {
        var json = JSON.parse(data);
        var txt = '';

        if(json.length > 0){
          for(var i=0;i<json.length;i++){
            txt = "<td>"+json[i].openrate+"</td><td>"+json[i].highrate+"</td><td>"+json[i].lowrate+"</td><td>"+json[i].closerate+"</td>";
                                                
            $("#example > tbody > tr").append(txt);
          }
          $('#example > tbody').append('<tr class="txt_ '+  nextindex +'"><td><input type="text" id="txt_'+ nextindex +'" name="symbol"  class="txtfield"  /></td></tr> </tbody>');
        }   
        $('.content').html(data);
      }
    })
  });
});

I have a problem iam fetching data from ajax call and move in json varibale.when write symbol in input box and fetching records and display in 1st td,and append in new row. and another insert symbol and click submit button fetching the record and display in second td but problem second record display in first row and second row just like screen shot. mcb records display in 2nd row not in 1st row. please suggest my mistake

  <table id='example' border='1' cellspacing='1' cellpadding='1' style='width:900px;' >
    <thead>
      <th> Marksymbol</th>
      <th class='namecol '> Openrate</th>
      <th class='namecol'> Highrate</th>
      <th class='namecol'> Lowrate</th>
      <th class='namecol'> Closerate</th>
    </tr>
  </thead>
  <tbody>
    <tr class ='txt_1'>
      <td > <input type='text' name="symbol" id='txt_1'  class='txtfield'/>
      </td>
    </tr>
                                            
</table>

<input type="button" id= "btnclick" class="zk_btn zk_btn_submit" name="submit1" value="SUBMIT"/>