Issue loading xml file into div box using jquery

I have created div boxes and one xml file for the values. To show the value in the div. Here is my code for XML.

<?xml version="1.0" encoding="UTF-8"?>
 <reports>
    <reportname>Checking 1</reportname>
    <reportname>Checking 2</reportname>
    <reportname>Checking 3</reportname>
    <reportname>Checking 4</reportname>
    <reportname>Checking 5</reportname>
 </reports>

Here is my code for creating div

$(document).ready(function (){
            var noofdiv=4;
            for(var i=0; i<=noofdiv; i++)
            $("body").append("<div id=myid>&nbsp;</div>");
        })

Here is my code for dynamically adding xml to the div

$.ajax({
            type: "GET",
            url: "data.xml",
            dataType: "xml",
            success: function (result) {
            $(result).find('reports').each(function () {
                  console.log('Load finished');
                $("div").append($(this).text() + "<br />");
             });
           }
        });

I am getting an error in chrome as XMLHTTPRequest and in firefox I cannot see my xml value.

Kindly help me for the above issue.

In fiddle I don't no how to write xml

Here is the fiddle Link

Thanks in advance

Regards Mahadevan