Get data to pulldown when using jquery

Hi I want to make a pulldown when add is clicked it will output data from the function (function is the page or from the url), but it doesn’t work.

Please help me

    function cmd_dk(){
        $dk = array('0'=>'0','1'=>'1','2'=>'2','3'=>'3');
        return $dk;
    }
  $(document).ready(function(){
   $(document).on('click', '.add', function(){
  var html = '';
  html += '<tr>';
  html += '<td><select name="item_unit[]" id="select_coa" class="form-control select2"><option value="">Select Unit</option><option value="">Select Unit</option></select></td>';
  html += '<td><button type="button" name="remove" class="btn btn-danger btn-sm remove"><span class="glyphicon glyphicon-minus"></span></button></td></tr>';
  $('#item_table').append(html); $('.select2').select2(); 
 });
 
  $(document).on('click', '.remove', function(){
  $(this).closest('tr').remove();
 }); 
 
 $.ajax({
        type: "POST",
        url: "cmd_dk",
     //   cache: "false",
        dataType: "json",
        success: function(data) {
          $("#select_coa").append("<option value='"+data.id_coa+"'>"+data.nama_coa+"</option>");
        }
  });
  });
  
  
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" name="add" class="btn btn-success btn-sm add"><span class="glyphicon glyphicon-plus"></span>Tambah Data</button>