Global variable in different scripts not working

Global variable in different scripts not working

Hi Need your help!!!

I am new to this and seeking help. I am trying to pull data in an html using xml.
For this i have few script used (taken from other sites) 1st script will fetch the data from xml and store in a global variable and the same variable is used in the second script.

However when i am trying alert global variable in first script showing the value but alert in the second variable is retriving blank.

Please help me. the html code is given below 



<!DOCTYPE html>
<html>
  <head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet"
  href="css/my_style_sheet.css">
  
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="css/my_style_sheet.css">
    </head>
    <body>
    
<!--<button id="addProduct">Add Product</button>-->

<div id="someContainer" style="white-space: normal; background-color: azure;"></div>
<div>
<span></span>
</div>

<script>
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      myFunction(this);
    }
  };
  xmlhttp.open("GET", "xml/Digital.xml", true);
  xmlhttp.send();
function myFunction(xml) {
var i;
var xmlDoc = xml.responseXML;
var table="<tr></tr>";
var x = xmlDoc.getElementsByTagName("practise");
for (i = 0; i <x.length; i++) 
  { 
   var img = x[i].getElementsByTagName("imageurl")[0].childNodes[0].nodeValue;
 table += "<tr><td><br><img src='"+img+"'></td><br>" +
    x[i].getElementsByTagName("imageurl")[0].childNodes[0].nodeValue +
    "</td><td><br>" +
    x[i].getElementsByTagName("img_name")[0].childNodes[0].nodeValue +
     "</td></tr>";
 rad = x[i].getElementsByTagName("imageurl")[0].childNodes[0].nodeValue;
 alert(rad);   
  }
  document.getElementById("demo").innerHTML = table;

}
</script>         
<script>
window.rad = '';
window.sree = "Sree";
window.shre = "Shreyas";
   $( document ).ready(function() {
       var i = 0;
/*$("#addProduct").click(function() {*/
var output = ""; 
alert(rad);
  for (i = 0; i < 10; i++) {
   
output += "<div style='float:left; width:200px' class='wrapper'  id='product"+i+"'>";
output += "<textarea rows='4' cols='20'  style='resize: none;' id='property"+i+"' value='"+rad+i+" "+sree+i+" "+shre+i+"'> "+rad+i+"\n"+sree+i+"\n"+shre+i+"</textarea></div>";
if (i%5==4) { 
output +="<div style='clear:both'></div>"
}  
  };
/*});*/
document.getElementById("someContainer").innerHTML = output
 //.appendTo("#someContainer");
$("input").on("click", function() {
  $("span").text("Clicked ID: " + this.value);
});
$("textarea").on("click", function() {
  $("span").text("Clicked ID: " + this.value);
});
});
</script>  
   
<div id="rad"></div>            
<div id="demo"></div>                                             
</body>
</html>