JSFiddle - React, Tailwind, and code Playground

by 53evesnagypapa

HTML

<div id="box1">First click here <br>to write array to table<br> into yellow div</div>
<div id="box2">Second click here <br>to view html source</div>
<div id="box9"></div>

CSS

#box1 {
position:absolute;
top:5px;
left:5px;
width:180px;
height:60px;
color:#0000ff;
font-size:14px;
border: 3px solid #000;
background-color:#AEF2B8;
}

#box2 {
position:absolute;
top:73px;
left:5px;
width:180px;
height:60px;
color:#0000ff;
font-size:14px;
border: 3px solid #000;
background-color:#AEF2B8;
}


#box9 {
color:#0000ff;
position:absolute;
font-size:14px;
width:300px;
height:300px;
top:150px;
left:10px;
background-color:#ffff00;
}

JavaScript

$(document).ready(function(){ 

    
    $('#box1').click(function(){
        
        var ide_tomb = new Array;
        ide_tomb = { kutya : 'tacsko', macska: 'angora', pocok : 'pezsma'};
        
        $('#box9').append('<table border="1">'); // error - autocomplete with </table>
        
        
        $.each(ide_tomb, function(indexje, erteke) {
            $('#box9').append('<tr><td>'+indexje + ':</td><td>'+erteke+'</td></tr>');
        }); 
        
        
        $('#box9').append('</table>');
        
    }); 
    
    
    
    $('#box2').click(function(){
        $('#box9').text( $('#box9').html());
		}); 

});