JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<div class="col-6" >
  <div class="card mt-4" id="bottom_container">
    <div class="card-header py-2">Testcase Details</div>
    <div id="myContainer" class="list-group" style="height:100px;">                                                      
      <!--Populated by function-->
    </div>
  </div>
</div>

<p id = "debug"></p>  <!-- FOR DEBUG PRINT ONLY, REMOVE LATER-->

JavaScript

// This function is executed as an AJAX response upon success. 
// It populates the container with list-group-items and two buttons. My question has an image of it populated.
// See how I created buttons after the DOM is rendered.
function upon_success(data) {
	event.preventDefault();	
	$("#myContainer > a").removeClass("active");
	$("#myContainer > a").hide();
	$("#myContainer").empty()        
	
	let arg_string = data.id;
	let args = arg_string.split('@');        
	let button1 = '<button class="btn btn-sm btn-primary my-2 my-sm-0 Button1" type="submit" value='+args[4]+'><i class="fa fa-download"></i> TE Log </button>';
	let button2 = '<button class="btn btn-sm btn-primary my-2 my-sm-0 Button2" type="submit" value='+args[5]+'><i class="fa fa-download"></i> UE Log </button>';
	$("#myContainer").append('<a class="list-group-item list-group-item-light py-0 ">'+'Test case : '+args[0]+'<span class="pull-right">'+button1+'  '+button2+'</span></a>');
	$("#myContainer").append('<a class="list-group-item list-group-item-light py-0 ">'+'Verdict : '+args[1]+'</a>');
	$("#myContainer").append('<a class="list-group-item list-group-item-light py-0 ">'+'Observation : '+args[2]+'</a>');
	$("#myContainer").append('<a class="list-group-item list-group-item-light py-0 ">'+'Start Time : '+args[3]+'</a>');   
}

// jQuery for button 1. This is supposed to open a folder tree in the browser where all the files are.
$(document).on("click",".teButton",function (){
	var log1 = "file:/"+this.value;  // this.value is a network path and already has two // on it. I only need to add 1 more /.
	document.getElementById("debug").innerHTML = log1 // FOR DEBUG PRINTING.
	// window.location.href = log1 // Why?
	// window.location.href = 'file:///C:\TestPC\Log_Database\Lab\'
	// window.location.href = 'file:///C:\TestPC\Log_Database\Lab\something.txt'
	window.location.href = 'file:///C:\Utils\'
});

//jQuery for button 2.
$(document).on("click",".ueButton",function (){
	var log2 =...