JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://198.58.104.99/application/JS/mustache.js"></script>
Result im getting:
<div id="#sampleArea"> </div>


<hr>
Result I want:

<div class ="divider-red"> Pack 1</div>
<ul>
<li> John: Red</li>
</ul>
    
<div class ="divider-green"> Pack 2</div>
<ul>
<li> Smith: Green</li>
</ul>

CSS

.divider-red
{
    
    border: 1px solid red;
    
}

.divider-green
{
    
    border: 1px solid green;
    
}

JavaScript

var obj = {'Cards':  {"Pack1":[{"name":"John","color":"red"}],
                       "Pack2":[{"name":"Smith","color":"green"}]}};

			//get length of object
			var len = $.map(obj.Cards, function(n, i) { return i; }).length;
            console.log('Length of Cards object is ' + len);
            var view = {};
            view["Packs"] =$.map(obj.Cards, function(n, pack_name)
			{ 
            console.log('this is:'+pack_name);
			for (var key in n) 
            { 
               var obj = n[key];
               for (var prop in obj) {
                  // important check that this is objects own property 
                  // not from prototype prop inherited
                  if(obj.hasOwnProperty(prop)){
                  console.log(prop + " = " + obj[prop]);
                  return prop = obj[prop];
      }
   }
}			
		 }); //end map
						 
			console.log(view);
							
			
		
			//console.log(view);
			var template = '<ul> {{#Packs}} <li>{{id}} : {{name}} -- {{color}} </li> {{/Packs}} </ul>';
			var html = Mustache.to_html(template, view);
      var json = JSON.stringify(view); 
			$('#sampleArea').html(html);