adding div into div alternatively

whee

by cliftonyeo

HTML

<button id="xfm">woomp</button>
<button id="myBtn">add element</button>

    <div id="one" class="base">
        <div id="qqq"></div>
    </div>

    <div id="two" class="base">
        <div id="zzz"></div>
    </div>

CSS

#xfm {
    z-index:500;
}

div {
    width:1px;
    height:30px;
    background:white;
    border: 1px solid black;
    font-size: 0px;
    line-height:30px;
    text-align: center;
    color:black;
    z-index:10;    
}

.base {
    position:relative;
    top:50%;
    left:50%;
    background: green;
    transform: rotate(0deg);
    transition: 3s;
}

.base_to {
    position:relative;
    top:50%;
    left:50%;
    transform: rotate(225deg);
    background: black; 
    transition: 3s;
}

.lase {
    position:relative;
    top:50%;
    left:50%;
    background: blue;
    transform: rotate(15deg);
}

.lase_to
    {
        transform: rotate(270deg);
    }

#qqq {
    position:;
    top:;
    left:;
    background:rgba(255,0,0,0.6);
    transform:inherit;
}

#zzz {
    position:inherit;
    top:inherit;
    left:inherit;
    background:rgba(0,255,255,0.6);
    transform:inherit;
}

JavaScript

var count = 1;

$('#myBtn').click(function(){
          
    if((count+1)%2==0) {
    
        var div = $('<div id="qqq"></div>');   
       
        div.appendTo('.base'); 
    
        div.html(count); 
        
    } else {
        
        var div = $('<div id="zzz"></div>');   
       
        div.appendTo('.base'); 
    
        div.html(count);  
 
    }
        
    count = count + 1;

});


$('#xfm').click( function() {
    
    if( $('div').hasClass('base') ) {
        
        $('div').removeClass('base');
    
        $('div').addClass('base_to');
        
    } else {
     
        $('div').removeClass('base_to');
    
        $('div').addClass('base');
        
    }
        
});