title: how to append data after clear
body: <p>I have to append data one by one by clicking button</p>
  
  <pre><code>$(document).ready(function() {
        var i = 0;
        $("#add_row").click(function() {
            $('#addr' + i).html("&lt;td&gt;" + (i + 1) + "&lt;/td&gt;&lt;td&gt;&lt;select id='myselect" + i + "' name='job_id[]" + i + "' class='form-control'&gt;&lt;option value=''&gt;Select the Job&lt;/option&gt;&lt;?php 
                $mysql = "select * from ca_job where job_status != 'Closed' and job_customer_name = '".$com_id.
                "'"; $result1 = mysql_query($mysql) or die(mysql_error());
                while ($roww = mysql_fetch_array($result1)) {
                    $sql = "select * from `ca_job_type` where `jtype_id`= '".$roww['job_type'].
                    "'";
                    $res = mysql_query($sql) or die(mysql_error());
                    $row1 = mysql_fetch_array($res);
                    echo '&lt;option value='.$roww['job_id'].
                    ' selected&gt;'.$roww['job_id'].
                    '-'.$row1['job_type_name'].
                    '&lt;/option&gt;';
                } ? &gt; &lt; /select&gt;&lt;/td &gt; &lt; td &gt; &lt; input name = 'invoice_description[]"+i+"'
                type = 'text'
                placeholder = 'invoice_description'
                class = 'form-control input-md'
                id = 'invoice_description' / &gt; &lt; /td&gt;&lt;td&gt;&lt;input name='sac_hsc_code[]"+i+"' type='text' placeholder='sac_hsc_code' class='form-control input-md'id='sac_hsc_code' / &gt; &lt; /td&gt;&lt;td&gt;&lt;select id='employee' name='tax_id[]"+i+"' class='form-control'&gt;&lt;option value=''&gt;Please select&lt;/option &gt; &lt;?php
              $sql = "select tax_id, tax_type, tax_comp, tax_Percent FROM ca_taxmaster where tax_comp = '0'";
              $resultset = mysql_query($sql) or die(mysql_error());
              while($rows = mysql_fetch_array($resultset)) { echo '&lt;option value='.$rows['tax_id'].' selected&gt;'.$rows['tax_type'].'&lt;/option&gt;'; } ?&gt; &lt; /select&gt;&lt;/td &gt; &lt; td &gt; &lt; input name = 'amount[]"+i+"'
                type = 'text'
                placeholder = 'amount'
                class = 'form-control input-md' / &gt; &lt; /td&gt;"
            );
  </code></pre>
  
  <p>Above source which I have posted was multiple input type up to that working but after selecting drop-down of id='myselect' for first list it was showing the values if press (+) button above value get cleared and showing last data alone but I need the values of first row and second row.</p>
  
  <pre><code>          $(document).ready(function() {
                $('#myselect' + i).change(function() {
                    var job_id = $(this).find(":selected").val();
                    var dataString = 'job_id=' + job_id;
                    $.ajax({
                        url: '&lt;?=base_url(); ?&gt;ajax/getjob.php',
                        dataType: "json",
                        data: dataString,
                        cache: false,
                        success: function(employeeData) {
                            $('.appendData').empty();
                            if (employeeData) {
                                $("#dvPassport").show();
                                $("#dvPassport1").hide();
                                var myselect = [employeeData];
                                employeeData.forEach(function(item) {
                                    var data = '&lt;tr&gt;';
                                    data += '&lt;td&gt;' + item.job_id + '&lt;/td&gt;';
                                    data += '&lt;td&gt;' + item.disburse_Date + '&lt;/td&gt;';
                                    data += '&lt;td align="right"&gt;' + item.approved_amount + '&lt;/td&gt;';
                                    data += '&lt;/tr&gt;';
                                    $('.appendData').append(data);
                                });
                            } else {
                                $("#dvPassport").hide();
                                $("#dvPassport1").show();
                            } //else
                        }
                    });
                });
            });
  
            $('#tab_logic').append('&lt;tr id="addr' + (i + 1) + '"&gt;&lt;/tr&gt;');
            i++;
        });
  
        $("#delete_row").click(function() {
            if (i &gt; 1) {
                $("#addr" + (i - 1)).html('');
                i--;
            }
        });
  
    });
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/TC6S9.png" rel="nofollow noreferrer">Please click here to get clear view</a></p>
  
  <p>In the above picture if I have selected dropdown two values showing and I am pressing the + button and selecting second drop-down first values getting cleared and showing second value what I have selected in the last dropdown. but I need the values of the first drop-down and second drop down.Please help me if anyone faces this problem .Thanks in advance.</p>