JSFiddle - React, Tailwind, and code Playground

HTML

<input type="file" id="file"/> <input type="button" id="submit" value="Submit" onclick="abc();"/>
		<br/><br/>

		<input type="text" id="output" />
		<input type="text" id="output1" />
    
<!--
XML to be uploaded
<cats>
	<cat id='output'>
		<name>George</name>
		<gender>male</gender>
		<color>white-mustard</color>
		<age>5 years</age>
	</cat>
	<cat id='output1'>
		<name>Pety</name>
		<gender>female</gender>
		<color>white-black-mustard</color>
		<age>3</age>
	</cat>
</cats>-->

JavaScript

$(document).ready(function () { // load xml file using jquery ajax

				$.ajaxPrefilter( "json script", function( options ) {
				  options.crossDomain = true;
				});
				console.log('Cross Domain True');
			});

			function abc() { // load xml file using jquery ajax
				
				$.ajaxPrefilter( "json script", function( options ) {
				  options.crossDomain = true;
				});

				var file = $('#file').val();
				console.log(file);

				$.ajax({
					type: "GET",
					url: file,
					dataType: "xml",
					crossDomain: true,
					success: function(xml) {
						var output;
						$(xml).find('cat').each(function(){
							var name = $(this).find('name').text();
							console.log(name);
							$('#' + $(this).attr('id')).val(name);
							console.log('We are here');
						});
						console.log(name);
					}
				});
			}