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">Table</div>
  <button id="btn1">Extract data Table</button>
</body>

CSS

table {  
    color: #333; /* Lighten up font color */
    font-family: Helvetica, Arial, sans-serif; /* Nicer font */
    width: 640px; 
    border-collapse: 
    collapse; border-spacing: 0; 
}

td, th { border: 1px solid #CCC; height: 30px; } /* Make cells a bit taller */

th {  
    background: #F3F3F3; /* Light grey background */
    font-weight: bold; /* Make sure they're bold */
}

td {  
    background: #FAFAFA; /* Lighter grey background */
    text-align: center; /* Center our text */
}

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 extractTableData = function(summaries){
  var detailField = [];
  detailField.push({});
  detailField[0].title = 'Name';
  detailField[0].values = [];
  for (var i =0; i<summaries.length; i++){
      detailField[0].values.push(summaries[i].childNodes[0].innerHTML);
      var detail = summaries[i].childNodes[1].childNodes;
      for(var j =0 ; j<detail.length; j++){
         var detailf = detailField.find(function(arr){
         			return arr.title === detail[j].localName 
         });
      	 if(!detailf){
        	detailField.push({
          	'values' : [],
            'title' : null
          });
          detailField[detailField.length -1].values.push(detail[j].innerHTML);
          detailField[detailField.length -1].title = detail[j].localName;
         }
         else{
         	detailf.values.push(detail[j].innerHTML);
         }
      }
     }
  return detailField;
};

$(document).ready(function(){
   ...