JSFiddle - React, Tailwind, and code Playground

HTML

<div>Xml File: <input type="file" id="fileInput" accept="text/xml" ></div>

<p id="container">

</p>

JavaScript

$(function () {
    $("#fileInput").on('change', function (e) {
        var file = $("#fileInput")[0].files[0];
        var reader = new FileReader();
        reader.readAsText(file);
        reader.onload = function (e) {
            var fileContent = reader.result;
             fileContent = fileContent.replace('<?xml version="1.0" encoding=UTF=8?>', '').replace(/(?:\r\n|\r|\n)/g, '');
            var xmlDoc = $.parseXML(fileContent);
            
            
            
$("#container").append('<div class"peopleNetwork"><img src="images/' + $(xmlDoc).find("image").text() + '/><p>' + $(xmlDoc).find('person[id="1"]').text() + '</p></div>');
         
        }
    });
  });