Cant get proper data from data attribute of a sele

问题:

I need to select account from a drop down and transfer the data attribute inside an input box onchange of the select box. i tried but i can only get 1 data attribute value from it. tried many things but failed. i been trying this for weeks and barely even got the answer.

The user selects the account from the dropdown menu then the account code field is automatically populated via the data-acc attribute. I have added a button to add more account.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
   $('select[name="account_name[]').change(function()
    {
     $('.account_num').val($('select[name="account_name[]"] option:selected').data('acc'));
    });
</script>
<script>
$(document).ready(function(){
  var i=1;
  var chart_add = '<tr id="row_chart'+i+'"><td align="center">                      <input type="text" name="account_code[]" class="form-control account_num" readonly></td><td><select class="form-control selectpicker" data-live-search="true" name="account_name[]" required>                      <option></option><?php $account = mysqli_query($conn,"SELECT chart_of_account.acoount_no, chart_of_account.account_title from chart_of_account inner join account_group_tbl on chart_of_account.account_group = account_group_tbl.account_name where account_group_tbl.account_type = 'Expense'");while($acc = mysqli_fetch_assoc($account)){$account_no = $acc['acoount_no'];$account_title = $acc['account_title'];?><option value="<?php echo $account_title; ?>" data-acc="<?php echo $account_no; ?>"><?php echo $account_title ; ?>                    </option><?php } ?></select></td><td><button type="button" name="remove_chart" id="'+i+'" class="btn btn-danger remove_chart"><i class="fa fa-minus"></i></button></td></tr>';
  $('#add').click(function(){
    i++;
    $('#dynamic_field').append(chart_add);
    $('.selectpicker').selectpicker('render');
    $('select[name="account_name[]').change(function()
         {
            $('.account_num').val($('select[name="account_name[]"] option:selected').data('acc'));
          });
    });
  $(document).on('click', '.remove_chart', function(){
    var button_id = $(this).attr("id"); 
    $('#row_chart'+button_id+'').remove();
  });

});
</script>

<div class="row">
  <div class="col-md-12">
    <div class="box box-default">
      <div class="box-header with-border">
        <h3 class="box-title">Report Per Office</h3>
      </div>
      <div class="box-body">
        <div class="col-md-12">
          <h4>Project Procurement Management Plan (PPMP) <hr >
        </div>
        <div class="col-md-1">
          Office:
        </div>
        <div class="col-md-4">
              <select class="selectpicker" data-live-search="true" name="office_from" data-width="auto" required >
              <option>--Select Reponsible Office--</option>
                          <?php 
                            $q = "SELECT * FROM `office_code_dept`";
                            $r = mysqli_query($conn,$q);
                            while($row = mysqli_fetch_assoc($r)){
                            $off_desc = $row['off_name']; 
                           ?>
                          <option value="<?php echo $off_desc;?>"><?php echo $off_desc; ?></option>
                          <?php 
                            }
                          ?>
                        </select>
                      </div>
                      <div class="col-md-1">Year:</div>
                      <div class="col-md-4"><input type="number" min="1990" max="3000" name="tax_year" class="form-control" style="text-align: center;" value="<?php echo date('Y'); ?>"></div>
                      <div class="col-md-2"><input type="submit" name="search" value="Search" class="btn btn-primary btn-block">
                      </div>
                      <div class="col-md-12"><br></div>
            </h4>

          <table class="table table-bordered" id="dynamic_field">
            <thead>
                 <tr>
                    <th width="7%" rowspan="2" style="text-align: center;">Code</th>
                    <th width="27%" rowspan="2" style="text-align: center;">General Description</th>
                    <th rowspan="2" width="5%"><button type="button" name="add" id="add" class="btn btn-success"><i class="fa fa-plus"></i></button></th>

                 </tr>

              </thead>
              <tbody>
                 <tr>
                    <td align="center">
                      <input type="text" name="account_code[]" class="form-control account_num" readonly>
                    </td>
                    <td>
                      <select class="form-control selectpicker" data-live-search="true" name="account_name[]" required>
                      <option></option>
                      <?php 
                        $account = mysqli_query($conn,"SELECT chart_of_account.acoount_no, chart_of_account.account_title from chart_of_account inner join account_group_tbl on chart_of_account.account_group = account_group_tbl.account_name where account_group_tbl.account_type = 'Expense'");
                        while($acc = mysqli_fetch_assoc($account)){
                          $account_no = $acc['acoount_no'];
                          $account_title = $acc['account_title'];
                      ?>
                      <option value="<?php echo $account_title; ?>" data-acc="<?php echo $account_no; ?>">
                        <?php echo $account_title ; ?>   
                      </option>
                    <?php } ?>
                    </select>
                    </td>
                    <td></td>
                 </tr>
              </tbody>
           </table>
      </div>   
    </div>
  </div>
</div>

sample screenshot