JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<body>
  <div id="test1">This is a <b>bold</b> paragraph.</div>
  <button id="btn1">Show Old/New Text</button>
</body>

JavaScript

var xml = $.parseXML("<ExtractSummaryDateSet><_date>2017-09-20</_date><_portfolioSummaries><ExtractSummaryDateSetDetail><_portfolioName>52613661</_portfolioName><_detail><Before>0</Before><After>-329</After><ChangeMaturing>0</ChangeMaturing><ChangeNew>-329</ChangeNew></_detail></ExtractSummaryDateSetDetail><ExtractSummaryDateSetDetail><_portfolioName>52613661_LP</_portfolioName><_detail><Before>0</Before><After>-329</After><ChangeMaturing>0</ChangeMaturing><ChangeNew>-329</ChangeNew></_detail></ExtractSummaryDateSetDetail><ExtractSummaryDateSetDetail><_portfolioName>526136|Total</_portfolioName><_detail><Before>0</Before><After>-329</After><ChangeMaturing>0</ChangeMaturing><ChangeNew>-329</ChangeNew></_detail></ExtractSummaryDateSetDetail></_portfolioSummaries></ExtractSummaryDateSet>");

var extractDetail = function(detail){
	var table = "";
  var detailChild = detail.childNodes;
  for(var i =0 ; i<detailChild.length; i++){
  table+="<tr><th>"+detailChild[i].localName+"</th><td>"+detailChild[i].innerHTML+"</td></tr>";
  }
  return table;
};

var extractSummaries = function(summaries){
  var table ="";
  for (var i =0; i<summaries.length; i++){
      table+="<tr><th>"+summaries[i].localName+"</th><td>__</td></tr>";
      table+="<tr><th>"+summaries[i].childNodes[0].localName+"</th>     <td>"+summaries[i].childNodes[0].innerHTML+"</td></tr>";
      var detail = summaries[i].childNodes[1];
      table+=extractDetail(detail);
     }
return table;
};

$(document).ready(function(){
    $("#btn1").click(function(){
        $("#test1").html(function(i, origText){
        debugger;
            var doc = xml.documentElement;
        		var table = "<table>";

table+= "<tr><th>"+doc.childNodes[0].localName+"</th><td>"+doc.childNodes[0].innerHTML+"</td></tr>"+      
"<tr><th>"+doc.childNodes[1].localName+"</th><td>_</td>";

var summaries = doc.childNodes[1].childNodes;
table += extractSummaries(summaries);

            table+="</table>";
            return table;
       ...