вытащить таблицу mysql из php в файл javascript

Question

Я пытаюсь построить свою систему счетов.У меня есть php-файл с моим подключением.мой php файл для новых счетов.и файл, который при добавлении новой строки извлекает те же данные из файла JavaScript.Проблема в том, что в моем раскрывающемся списке с главной страницы отображаются все типы мультимедиа, но использование кода javascript сохраняет раскрывающийся список пустым.

Я пробовал разные способы заставить добавленный раскрывающийся список работать.

в моемФайл подключения php.

include('dbh.inc.php');

//getting data from table
$sql = "SELECT * FROM mediaType";
$mediaResult = mysqli_query($conn, $sql);

//Storing Array
$data = $array();
while ($row = mysqli_fetch_row($mediaResult)) {
//    $data[] = $row['media']; 
      $data[] = $row;
}

//return response in json format
$mediaType = json_encode($data);
//echo $row['media'];
echo $mediaType;

в моем newOrders.php

<!--ADDING MEDIA TO DROPDOWN MENU-->
<?php
     $clientCol = mysqli_query($conn, "SELECT * FROM mediaType ORDER BY media DESC");

      echo '<option value="">Select A Media...</option>';

       while($row = mysqli_fetch_array($clientCol)) {
            extract($row)

       ?>

          <option>

         <?php     
             echo $row['media'];
          ?>

          </option>

         <?php
           }
          ?>

</select></td>

в моем файле javascript.

$(document).ready(function(){
    $(document).on('click', '#checkAll', function() {           
        $(".itemRow").prop("checked", this.checked);
    }); 
    $(document).on('click', '.itemRow', function() {    
        if ($('.itemRow:checked').length == $('.itemRow').length) {
            $('#checkAll').prop('checked', true);
        } else {
            $('#checkAll').prop('checked', false);
        }
    });  
    var count = $(".itemRow").length;
    $(document).on('click', '#addRows', function() { 
        count++;
        var htmlRows = '';
        htmlRows += '<tr>';
        htmlRows += '<td><input class="itemRow" type="checkbox"></td>';          
        htmlRows += '<td><input type="text" name="productCode[]" id="productCode_'+count+'" class="form-control" autocomplete="off"></td>';          
        htmlRows += '<td><input type="text" name="productName[]" id="productName_'+count+'" class="form-control" autocomplete="off"></td>'; 

        htmlRows += '<td><select class="form-control" name="mediaType[]" id="mediaType_2"><option>Select A Media...</option><option id="output">'

        //when the button is clicked run the ajax function
          '<div id="output"></div>'

        '</option></select></td>';

мой ajax-кодв нижней части этой страницы.

$.ajax({                                      
    url: '../includes/media.inc.php', 
    data: "", 
    dataType: 'json',  
    success: function(rows)  
  {
    for (var i in rows)
    {
      var row = rows[i];          

      var media = row[1];
//      var vname = row[1];
      $('#output').append(media)
    } 
  } 
});

раскрывающийся список остается пустым.Любая помощь будет высоко ценится!