We Keep Coding

I want to create a vote system with jQuery but not working

I am trying to create a function with jQuery but I can't. When you press a button then an arrow will move to 36 degrees. I have 5 buttons and the circle is 180 degrees.
My code is working in one way but it's not in reverse, which means when you press button 1 to 5 it's working but when I try to click randomly then it is not working.
Here is what i am trying to build
$(document).ready(function() {
$("#ang36").click(function() {
$("#silder_image").removeClass("animate1");
$("#silder_image").addClass("animate1");
});
$("#ang72").click(function() {
$("#silder_image").removeClass("animate2");
$("#silder_image").addClass("animate2");
});
$("#ang108").click(function() {
$("#silder_image").removeClass("animate3");
$("#silder_image").addClass("animate3");
});
$("#ang144").click(function() {
$("#silder_image").removeClass("animate4");
$("#silder_image").addClass("animate4");
});
$("#ang180").click(function() {
$("#silder_image").removeClass("animate5");
$("#silder_image").addClass("animate5");
});
});
.slider_area {
width: 800px;
margin: 0 auto;
position: relative;
margin-top: 400px;
}
.silder_image {
width: 100px;
height: 100px;
}
.animate1 {
transform: rotate(36deg);
-ms-transform: rotate(36deg);
-webkit-transform: rotate(36deg);
transform-origin: center center;
transition-duration: 5s;
}
.animate1 img,
.animate2 img,
.animate3 img,
.animate4 img,
.animate5 img {
transform: rotate(-90deg);
}
.animate2 {
transform: rotate(72deg);
-ms-transform: rotate(72deg);
-webkit-transform: rotate(72deg);
transform-origin: center center;
transition-duration: 5s;
}
.animate3 {
transform: rotate(108deg);
-ms-transform: rotate(108deg);
-webkit-transform: rotate(108deg);
transform-origin: center center;
transition-duration: 5s;
}
.animate4 {
transform: rotate(144deg);
-ms-transform: rotate(144deg);
-webkit-transform: rotate(144deg);
transform-origin: center center;
transition-duration: 5s;
}
.animate5 {
transform: rotate(180deg);
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform-origin: center center;
transition-duration: 5s;
}
.triggrs {
position: relative;
width: 400px;
bottom: -171px;
left: 0;
}
<div class="slider_area">
<div id="silder_image">
<img src="Slider Vote.png" alt="">
</div>
<div class="triggrs">
<button id="ang36">button1</button>
<button id="ang72">button2</button>
<button id="ang108">button3</button>
<button id="ang144">button4</button>
<button id="ang180">button5</button>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

I created another approach which could also help you further (maybe).
let needle = document.querySelector('#needle ');
let btns = document.querySelectorAll('button')
btns.forEach( btn=>{ btn.addEventListener('click', function() {
let level = this.dataset.deg;
needle.style.transform = "rotate("+Number(level)+"deg)"});
})
#panel {
height: 50px;
overflow: hidden;
}
.circle{
width: 100px;
height: 100px;
border-radius: 100%;
border: 5px solid grey;
position: relative;
display: flex;
justify-content: center;
transform: rotate(-90deg);
background: #ffffff;
background: linear-gradient(to bottom, #ffffff 0%,#e8e000 50%,#e50000 100%);
}
#needle {
width: 6px;
height: 50px;
background: #4361ff;
transform-origin: bottom;
transition: transform .75s cubic-bezier(.31,-0.52,.84,1.55);
transform: rotate(30deg);
box-sizing: border-box;
margin-left: -3px;
}
.buttons {
margin-top: 2rem;
}
<div id="panel">
<div class="circle">
<div id="needle"></div>
</div>
</div>
<div class="buttons">
<button data-deg="30">1</button>
<button data-deg="60">2</button>
<button data-deg="90">3</button>
<button data-deg="120">4</button>
<button data-deg="150">5</button>
</div>

Why counter is not working after one interval

I want to create a time down counter. I already created a counter but it is not working properly and how to reset animation of CSS after one interval.
There is the link of the jsfiddle: [https://jsfiddle.net/waleedGRT/x4rcj068/10/](https://jsfiddle.net/waleedGRT/x4rcj068/10/)
Thanks You in advance.

Not sure what exact functionality you're looking for, but this should get you past your problem. EDIT updated code as per OP response.
function counterA(valuea) {
var tempA = valuea;
setInterval(function() {
if (tempA < 1) {
window.history.go(0);
}
$('#time').text(tempA);
tempA--;
}, 1000);
}
$(document).ready(function() {
counterA(11);
});
.wrapper {
margin: 50px;
width: 300px;
height: 300px;
overflow: hidden;
position: relative
}
.right {
border: #3f85a3 solid 15px;
height: 180px;
width: 180px;
border-radius: 120px;
border-top-color: transparent;
border-left-color: transparent;
position: absolute;
transform: rotate(-45deg);
animation: rota2 12000ms linear;
-moz-animation: rota2 12000ms linear;
-o-animation: rota2 12000ms linear;
-webkit-animation: rota2 12000ms linear;
}
#keyframes rota2 {
from {
transform: rotate(-225deg);
}
to {
transform: rotate(-45deg);
}
}
#-o-keyframes rota2 {
from {
transform: rotate(-225deg);
}
to {
transform: rotate(-45deg);
}
}
#-moz-keyframes rota2 {
from {
transform: rotate(-225deg);
}
to {
transform: rotate(-45deg);
}
}
#-webkit-keyframes rota2 {
from {
transform: rotate(-225deg);
}
to {
transform: rotate(-45deg);
}
}
.left {
border: #3f85a3 solid 15px;
height: 180px;
width: 180px;
border-radius: 120px;
border-bottom-color: transparent;
border-right-color: transparent;
position: absolute;
transform: rotate(315deg);
animation: rota 24000ms linear;
-o-animation: rota 24000ms linear;
-moz-animation: rota 24000ms linear;
-webkit-animation: rota 24000ms linear;
}
#keyframes rota {
from {
transform: rotate(-45deg);
}
to {
transform: rotate(315deg);
}
}
#-o-keyframes rota {
from {
transform: rotate(-45deg);
}
to {
transform: rotate(315deg);
}
}
#moz-keyframes rota {
from {
transform: rotate(-45deg);
}
to {
transform: rotate(315deg);
}
}
#-webkit-keyframes rota {
from {
transform: rotate(-45deg);
}
to {
transform: rotate(315deg);
}
}
.middle {
color: #0987bc;
font-size: 18px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
width: 180px;
height: 180px;
left: 15px;
top: 15px;
border-radius: 150px;
position: relative;
z-index: 4;
}
.popover {
background: white;
width: 80px;
height: 162px;
position: absolute;
top: -3px;
left: -3px;
opacity: 0;
z-index: 2;
animation: popover 0ms linear;
}
#keyframes popover {
0% {
opacity: 1;
}
99% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#-o-keyframes popover {
0% {
opacity: 1;
}
99% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#-moz-keyframes popover {
0% {
opacity: 1;
}
99% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#-webkit-keyframes popover {
0% {
opacity: 1;
}
99% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#time {
font-size: 30px;
}
#timer {
font-size: 30px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Round E&D</title>
</head>
<body>
<div>
<div class="wrapper">
<div class="right"></div>
<div class="left"></div>
<div class="middle">
<p id="counter"><br />
<span id="counter">
<div>
<span id="timer">
0:<span id="time">12</span>
</span>
</div>
</span>
</p>
</div>
<div class="popover"></div>
</div>
</div>
</body>
</html>

How to get an Arrow shape on the below provided JS filddle circular progress bar

I m trying to get an Arrow shape for the below code of circular progress bar. But it seems impossible for me so far, hence my limited experience in CSS and styling.
Please help or guide me how do I get an Arrow shape at the end of the circular progress bar.
The present circular progress bar looks like this:
How I want it..
Please find the given JSfiddle link
https://jsfiddle.net/jh1s7raq/
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
:after, :before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html, body {
height: 100%;
}
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.428571429;
color: #333333;
background-color: #ffffff;
}
.progress{
width: 100px;
height: 100px;
line-height: 100px;
background: none;
margin: 0;
box-shadow: none;
position: relative;
}
.progress:after{
content: "";
width: 100%;
height: 100%;
border-radius: 50%;
border: 12px solid #fff;
position: absolute;
top: 0;
left: 0;
}
.progress > span{
width: 50%;
height: 100%;
overflow: hidden;
position: absolute;
top: 0;
z-index: 1;
}
.progress .progress-left{
left: 0;
}
.progress .progress-bar{
width: 100%;
height: 100%;
background: none;
border-width: 12px;
border-style: solid;
position: absolute;
top: 0;
}
.progress .progress-left .progress-bar{
left: 100%;
border-top-right-radius: 80px;
border-bottom-right-radius: 80px;
border-left: 0;
-webkit-transform-origin: center left;
transform-origin: center left;
}
.progress .progress-right{
right: 0;
}
.progress .progress-right .progress-bar{
left: -100%;
border-top-left-radius: 80px;
border-bottom-left-radius: 80px;
border-right: 0;
-webkit-transform-origin: center right;
transform-origin: center right;
animation: loading-1 1.8s linear forwards;
}
.progress .progress-value{
width: 90%;
height: 90%;
border-radius: 50%;
background: white;
font-size: 20px;
color: #012C52;
line-height: 100px;
text-align: center;
position: absolute;
top: 5%;
left: 5%;
}
.progress.blue .progress-bar{
border-color: #012C52;
}
.progress.blue .progress-left .progress-bar{
animation: loading-2 1.5s linear forwards 1.8s;
}
.progress.yellow .progress-bar{
border-color: #fdba04;
}
.progress.yellow .progress-left .progress-bar{
animation: loading-3 1s linear forwards 1.8s;
}
.progress.pink .progress-bar{
border-color: #ed687c;
}
.progress.pink .progress-left .progress-bar{
animation: loading-4 0.4s linear forwards 1.8s;
}
.progress.green .progress-bar{
border-color: #1abc9c;
}
.progress.green .progress-left .progress-bar{
animation: loading-5 1.2s linear forwards 1.8s;
}
#keyframes loading-1{
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
}
#keyframes loading-2{
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(144deg);
transform: rotate(144deg);
}
}
#keyframes loading-3{
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
}
#keyframes loading-4{
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(36deg);
transform: rotate(36deg);
}
}
#keyframes loading-5{
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(126deg);
transform: rotate(126deg);
}
}
#media only screen and (max-width: 990px){
.progress{ margin-bottom: 20px; }
}
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="progress blue" style="margin-top:50px;">
<span class="progress-left">
<span class="progress-bar"></span>
</span>
<span class="progress-right">
<span class="progress-bar"></span>
</span>
<div class="progress-value">90%</div>
</div>
</div>
</div>
</div>
Please let me know if I m not clear on my question... Thanks

You have to add markup in your html for arrow element like
<span class="arrow"></span>
And then add css for it
.progress>span.arrow {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 9;
animation: rotate 3.3s linear forwards;
}
.progress>span.arrow:after {
content: "";
border-width: 16px;
border-style: solid;
border-color: transparent transparent transparent #ff0000;
position: absolute;
left: 50px;
top: -8px;
}
#keyframes rotate {
from {
transform: rotate(0deg)
}
to {
transform: rotate(324deg)
}
}
Check working example below. let me know if you have any doubts on it
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
:after,
:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html,
body {
height: 100%;
}
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.428571429;
color: #333333;
background-color: #ffffff;
}
.progress {
width: 100px;
height: 100px;
line-height: 100px;
background: none;
margin: 0;
box-shadow: none;
position: relative;
}
.progress:after {
content: "";
width: 100%;
height: 100%;
border-radius: 50%;
border: 12px solid #fff;
position: absolute;
top: 0;
left: 0;
}
.progress>span:not(.arrow) {
width: 50%;
height: 100%;
overflow: hidden;
position: absolute;
top: 0;
z-index: 1;
}
.progress>span.arrow {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 9;
animation: rotate 3.3s linear forwards;
}
.progress>span.arrow:after {
content: "";
border-width: 16px;
border-style: solid;
border-color: transparent transparent transparent #ff0000;
position: absolute;
left: 50px;
top: -8px;
}
#keyframes rotate {
from {
transform: rotate(0deg)
}
to {
transform: rotate(324deg)
}
}
.progress .progress-left {
left: 0;
}
.progress .progress-bar {
width: 100%;
height: 100%;
background: none;
border-width: 12px;
border-style: solid;
position: absolute;
top: 0;
}
.progress .progress-left .progress-bar {
left: 100%;
border-top-right-radius: 80px;
border-bottom-right-radius: 80px;
border-left: 0;
-webkit-transform-origin: center left;
transform-origin: center left;
}
.progress .progress-right {
right: 0;
}
.progress .progress-right .progress-bar {
left: -100%;
border-top-left-radius: 80px;
border-bottom-left-radius: 80px;
border-right: 0;
-webkit-transform-origin: center right;
transform-origin: center right;
animation: loading-1 1.8s linear forwards;
}
.progress .progress-value {
width: 90%;
height: 90%;
border-radius: 50%;
background: white;
font-size: 20px;
color: #012C52;
line-height: 100px;
text-align: center;
position: absolute;
top: 5%;
left: 5%;
}
.progress.blue .progress-bar {
border-color: #012C52;
}
.progress.blue .progress-left .progress-bar {
animation: loading-2 1.5s linear forwards 1.8s;
}
.progress.yellow .progress-bar {
border-color: #fdba04;
}
.progress.yellow .progress-left .progress-bar {
animation: loading-3 1s linear forwards 1.8s;
}
.progress.pink .progress-bar {
border-color: #ed687c;
}
.progress.pink .progress-left .progress-bar {
animation: loading-4 0.4s linear forwards 1.8s;
}
.progress.green .progress-bar {
border-color: #1abc9c;
}
.progress.green .progress-left .progress-bar {
animation: loading-5 1.2s linear forwards 1.8s;
}
#keyframes loading-1 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
}
#keyframes loading-2 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(144deg);
transform: rotate(144deg);
}
}
#keyframes loading-3 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
}
#keyframes loading-4 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(36deg);
transform: rotate(36deg);
}
}
#keyframes loading-5 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(126deg);
transform: rotate(126deg);
}
}
#media only screen and (max-width: 990px) {
.progress {
margin-bottom: 20px;
}
}
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="progress blue" style="margin:50px;">
<span class="arrow"></span>
<span class="progress-left">
<span class="progress-bar"></span>
</span>
<span class="progress-right">
<span class="progress-bar"></span>
</span>
<div class="progress-value">90%</div>
</div>
</div>
</div>
</div>
Fiddle link: https://jsfiddle.net/jh1s7raq/1/

Apply CSS animation class for many instance in one page

I try to make share button for social media with animated button in CSS. But I want some button to display in one page. For different content. But I found this didn't work for second button. If the second button is clicked, the first button that animated instead of second. My Question is how to make the CSS applied to every button in my page?
This is the fiddle :
https://jsfiddle.net/2s6w4hq7/
This is my HTML :
<title>Profill</title>
<br>
<br>
<br>
<br>
<div class="share">
<div class="share-button">
<input class="toggle-input" id="toggle-input" type="checkbox" />
<label for="toggle-input" class="toggle"></label>
<ul class="network-list">
<li class="twitter">
Share on Twitter
</li>
<li class="facebook">
Share on Facebook
</li>
<li class="googleplus">
Share on Google+
</li>
</ul>
</div>
</div>
<br>
<br>
<div class="share">
<div class="share-button">
<input class="toggle-input" id="toggle-input" type="checkbox" />
<label for="toggle-input" class="toggle"></label>
<ul class="network-list">
<li class="twitter">
Share on Twitter
</li>
<li class="facebook">
Share on Facebook
</li>
<li class="googleplus">
Share on Google+
</li>
</ul>
</div>
</div>
and this is the CSS :
/*
Using FontAwesome for icons
https://fortawesome.github.io/Font-Awesome/
*/
.share-button {
position: relative;
width: 50px;
margin: 5px;
}
.toggle {
position: relative;
width: 50px;
height: 50px;
z-index: 10;
display: block;
cursor: pointer;
color: #fff;
background-color: #3D3D3D;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border-radius: 50%;
}
.toggle:hover {
background-color: #0a0a0a;
}
.toggle:after {
position: relative;
display: block;
width: 50px;
height: 50px;
font-family: 'FontAwesome';
content: "\f1e0";
line-height: 50px;
font-size: 29px;
text-align: center;
left: -2px;
}
.toggle-input {
display: none;
}
.toggle-input:checked + .toggle:after, .toggle-input:checked + .toggle:before {
background-color: #fff;
content: "";
height: 3px;
width: 30px;
position: absolute;
left: 10px;
top: 23px;
}
.toggle-input:checked + .toggle:after {
-webkit-animation: bar1 0.3s forwards;
animation: bar1 0.3s forwards;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.toggle-input:checked + .toggle:before {
-webkit-animation: bar2 0.3s forwards;
animation: bar2 0.3s forwards;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.network-list li {
position: absolute;
display: block;
width: 50px;
height: 50px;
margin: 0;
padding: 0;
list-style-type: none;
opacity: 0;
}
.network-list .twitter {
left: 50px;
top: -50px;
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transform: perspective(500px) rotateX(90deg) rotateY(0deg) rotateZ(0deg);
transform: perspective(500px) rotateX(90deg) rotateY(0deg) rotateZ(0deg);
-webkit-transition: all 0.15s ease;
transition: all 0.15s ease;
}
.network-list .facebook {
left: 50px;
top: 0;
-webkit-transform-origin: 0% 50%;
transform-origin: 0% 50%;
-webkit-transform: perspective(500px) rotateX(0deg) rotateY(90deg) rotateZ(0deg);
transform: perspective(500px) rotateX(0deg) rotateY(90deg) rotateZ(0deg);
-webkit-transition: all 0.15s ease 0.3s;
transition: all 0.15s ease 0.3s;
}
.network-list .googleplus {
left: 50px;
top: 50px;
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform: perspective(500px) rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
transform: perspective(500px) rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
-webkit-transition: all 0.15s ease 0.15s;
transition: all 0.15s ease 0.15s;
}
.network-list a {
color: #fff;
position: relative;
display: block;
width: 50px;
height: 50px;
overflow: hidden;
line-height: 50px;
text-indent: 120%;
text-decoration: none;
}
.network-list a:before {
top: 0;
right: 0;
bottom: 0;
left: 0;
position: absolute;
width: 50px;
height: 50px;
font-family: 'FontAwesome';
font-size: 26px;
-webkit-font-smoothing: antialiased;
text-align: center;
line-height: 50px;
text-indent: 0;
}
.network-list .twitter a {
background-color: #00C3F3;
border-radius: 50%;
}
.network-list .twitter a:before {
content: "\f099";
}
.network-list .twitter a:hover:before {
box-shadow: inset 0 0 0 2px #00C3F3;
}
.network-list .facebook a {
background-color: #2C609B;
border-radius: 50%;
}
.network-list .facebook a:before {
content: "\f09a";
}
.network-list .facebook a:hover:before {
box-shadow: inset 0 0 0 2px #2C609B;
}
.network-list .googleplus a {
background-color: #EC3F25;
border-radius: 50%;
}
.network-list .googleplus a:before {
content: "\f0d5";
}
.network-list .googleplus a:hover:before {
box-shadow: inset 0 0 0 2px #EC3F25;
}
input:checked ~ .network-list li {
opacity: 1;
top: 0;
}
input:checked ~ .network-list .twitter {
left: 50px;
top: -50px;
-webkit-transform: perspective(500px) rotateX(0) rotateY(0deg) rotateZ(0deg);
transform: perspective(500px) rotateX(0) rotateY(0deg) rotateZ(0deg);
-webkit-transition: all 0.25s ease 0.4s;
transition: all 0.25s ease 0.4s;
}
input:checked ~ .network-list .facebook {
left: 50px;
top: 0;
-webkit-transform: perspective(500px) rotateX(0deg) rotateY(0) rotateZ(0deg);
transform: perspective(500px) rotateX(0deg) rotateY(0) rotateZ(0deg);
-webkit-transition: all 0.25s ease 0.2s;
transition: all 0.25s ease 0.2s;
}
input:checked ~ .network-list .googleplus {
left: 50px;
top: 50px;
-webkit-transform: perspective(500px) rotateX(0) rotateY(0deg) rotateZ(0deg);
transform: perspective(500px) rotateX(0) rotateY(0deg) rotateZ(0deg);
-webkit-transition: all 0.25s ease 0.6s;
transition: all 0.25s ease 0.6s;
}
#-webkit-keyframes bar1 {
0% {
content: "\f1e0";
width: 46px;
height: 50px;
background-color: transparent;
-webkit-transform: scale(1);
transform: scale(1);
top: 0;
left: 0;
opacity: 1;
}
50% {
background-color: transparent;
content: "\f1e0";
width: 46px;
height: 50px;
top: 0;
left: 0;
-webkit-transform: scale(0.2);
transform: scale(0.2);
opacity: 0;
}
50.001% {
background-color: #fff;
left: 10px;
top: 22px;
content: "";
height: 3px;
width: 30px;
-webkit-transform: rotate(45deg), scale(0.2);
transform: rotate(45deg), scale(0.2);
}
100% {
-webkit-transform: rotate(45deg), scale(1);
transform: rotate(45deg), scale(1);
opacity: 1;
}
}
#keyframes bar1 {
0% {
content: "\f1e0";
width: 46px;
height: 50px;
background-color: transparent;
-webkit-transform: scale(1);
transform: scale(1);
top: 0;
left: 0;
opacity: 1;
}
50% {
background-color: transparent;
content: "\f1e0";
width: 46px;
height: 50px;
top: 0;
left: 0;
-webkit-transform: scale(0.2);
transform: scale(0.2);
opacity: 0;
}
50.001% {
background-color: #fff;
left: 10px;
top: 22px;
content: "";
height: 3px;
width: 30px;
-webkit-transform: rotate(45deg), scale(0.2);
transform: rotate(45deg), scale(0.2);
}
100% {
-webkit-transform: rotate(45deg), scale(1);
transform: rotate(45deg), scale(1);
opacity: 1;
}
}
#-webkit-keyframes bar2 {
0% {
background-color: transparent;
-webkit-transform: 0 scale(0.2);
transform: 0 scale(0.2);
opacity: 0;
}
50% {
background-color: transparent;
-webkit-transform: 0 scale(0.2);
transform: 0 scale(0.2);
opacity: 0;
}
50.1% {
background-color: transparent;
-webkit-transform: rotate(-45deg) scale(0.2);
transform: rotate(-45deg) scale(0.2);
opacity: 0;
}
100% {
-webkit-transform: rotate(-45deg) scale(1);
transform: rotate(-45deg) scale(1);
opacity: 1;
}
}
#keyframes bar2 {
0% {
background-color: transparent;
-webkit-transform: 0 scale(0.2);
transform: 0 scale(0.2);
opacity: 0;
}
50% {
background-color: transparent;
-webkit-transform: 0 scale(0.2);
transform: 0 scale(0.2);
opacity: 0;
}
50.1% {
background-color: transparent;
-webkit-transform: rotate(-45deg) scale(0.2);
transform: rotate(-45deg) scale(0.2);
opacity: 0;
}
100% {
-webkit-transform: rotate(-45deg) scale(1);
transform: rotate(-45deg) scale(1);
opacity: 1;
}
}

You need to use different id for each button and match the <label>'s for attribute to that same id:
For example:
https://jsfiddle.net/2s6w4hq7/1/
<input class="toggle-input" id="toggle-input-1" type="checkbox" />
<label for="toggle-input-1" class="toggle"></label>
<input class="toggle-input" id="toggle-input-2" type="checkbox" />
<label for="toggle-input-2" class="toggle"></label>

this is simple. you just change your id name of the input and call same name in label.
ie.
<input class="toggle-input" id="toggle-input1" type="checkbox" />
<label for="toggle-input1" class="toggle"></label>
change your code with above code.

You just need to define different ID's for Checkbox and label under div of class share-button.
Please refer below code:
<title>Profill</title>
<br>
<br>
<br>
<br>
<div class="share">
<div class="share-button">
<input class="toggle-input" id="toggle-input" type="checkbox" />
<label for="toggle-input" class="toggle"></label>
<ul class="network-list">
<li class="twitter">
Share on Twitter
</li>
<li class="facebook">
Share on Facebook
</li>
<li class="googleplus">
Share on Google+
</li>
</ul>
</div>
</div>
<br>
<br>
<div class="share">
<div class="share-button">
<input class="toggle-input" id="toggle-input1" type="checkbox" />
<label for="toggle-input1" class="toggle"></label>
<ul class="network-list">
<li class="twitter">
Share on Twitter
</li>
<li class="facebook">
Share on Facebook
</li>
<li class="googleplus">
Share on Google+
</li>
</ul>
</div>
</div>

Animation glitches on website

I made a small scale experiment where I was testing an animation that would happen when you repeatedly hit the yellow square, in the jsfiddle below:
http://jsfiddle.net/aritro33/v86tE/5/
However, I am trying to move the animation seen in that jsfiddle to the jsfiddle here when you hit the compose/post circle/button. The animation would be applied to the posts. This is the jsfiddle:
I am having problems however, and after the 3+ times hitting the compose and post button, the animation falls apart.
Any ideas how to put the same animation seen in the first jsfiddle in the second jsfiddle for the posts?
Thanks so much to anyone who can help!
HTML for second experiment:
<div id="compose"><span id="firstspan">Compose</span>
<span id="fourthspan">Post</span>
</div>
<span id="noposts">- No Posts Yet -</span>
<div id="composeheader">
<input type="text" id="secondspan" value="Write Header Here:" />
</div>
<div id="thecolor"></div>
<div class="bubble">
<input type="text" id="thehex" value="#2AC0A3" />
</div>
<div id="body"><span id="thirdspan" contenteditable="true">Write context text here:</span>
</div>
<ul id="allposts"></ul>
CSS for second experiment:
#import url(http://fonts.googleapis.com/css?family=Roboto:100);
body {
background-color: #2D3E50;
}
#compose {
height: 215px;
width: 215px;
background-color: #EBF1F1;
border-radius: 150px;
position: relative;
left: 100px;
top: 40px;
color: #2c3e50;
-webkit-transition: all 0.15s linear;
-moz-transition: all 0.15s linear;
transition: all 0.15s linear;
}
#compose:hover {
background-color: #219B86;
color: #EBF1F1;
}
#firstspan {
font-size: 39px;
font-family:'Roboto';
position: relative;
left: 22px;
top: 75px;
}
#composeheader {
height: 80px;
width: 500px;
background-color:#2AC0A3;
position: relative;
bottom: 175px;
left: 365px;
color: white;
}
#secondspan {
color: white;
font-family:'Roboto';
font-size: 40px;
position: relative;
background-color: #2AC0A3;
border: 1px solid #2AC0A3;
left: 15px;
top: 10px;
}
#body {
min-height: 80px;
overflow: hidden;
width: 500px;
background-color: #C6EEE6;
position: relative;
left: 365px;
bottom: 275px;
padding: 20px;
-moz-box-sizing: border-box;
box-sizing: border-box;
-ms-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
#thirdspan {
color: black;
font-family:'Roboto';
outline: 0px solid transparent;
}
.thirdspan2{
color: black;
font-family:'Roboto';
outline: 0px solid transparent;
}
#thecolor {
height: 50px;
width: 50px;
background-color: #2AC0A3;
border-radius: 100px;
position: relative;
left: 365px;
bottom: 315px;
}
.bubble {
position: relative;
left: 440px;
bottom: 365px;
width: 145px;
height: 50px;
padding: 0px;
background: #FFFFFF;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.bubble:after {
content:'';
position: absolute;
border-style: solid;
border-width: 10px 15px 10px 0;
border-color: transparent #FFFFFF;
display: block;
width: 0;
z-index: 1;
left: -15px;
top: 15px;
}
#thehex {
font-family:'Roboto';
font-size: 20px;
height: 30px;
width: 115px;
background-color: white;
position: relative;
border: 0px none;
outline: 0px solid transparent;
top: 10px;
left: 28px;
}
.animated {
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-ms-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-ms-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
}
.animated.hinge {
-webkit-animation-duration: 2s;
-moz-animation-duration: 2s;
-ms-animation-duration: 2s;
-o-animation-duration: 2s;
animation-duration: 2s;
}
#-webkit-keyframes bounceInDown {
0% {
-webkit-transform: translateY(-2000px);
}
60% {
-webkit-transform: translateY(30px);
}
80% {
-webkit-transform: translateY(-10px)
}
100% {
-webkit-transform: translateY()
}
}
#-moz-keyframes bounceInDown {
0% {
-moz-transform: translateY(-2000px);
}
60% {
-moz-transform: translateY(30px);
}
80% {
-moz-transform: translateY(-10px)
}
100% {
-moz-transform: translateY()
}
}
#-ms-keyframes bounceInDown {
0% {
-ms-transform: translateY(-2000px);
}
60% {
-ms-transform: translateY(30px);
}
80% {
-ms-transform: translateY(-10px)
}
100% {
-ms-transform: translateY()
}
}
#-o-keyframes bounceInDown {
0% {
-o-transform: translateY(-2000px);
}
60% {
-o-transform: translateY(30px);
}
80% {
-o-transform: translateY(-10px)
}
100% {
-o-transform: translateY()
}
}
#keyframes bounceInDown {
0% {
transform: translateY(-2000px);
}
60% {
transform: translateY(30px);
}
80% {
transform: translateY(-10px)
}
100% {
transform: translateY()
}
}
.bounceInDown {
-webkit-animation-name: bounceInDown;
-moz-animation-name: bounceInDown;
-ms-animation-name: bounceInDown;
-o-animation-name: bounceInDown;
animation-name: bounceInDown;
}
#-webkit-keyframes bounceInUp {
0% {
-webkit-transform: translateY(2000px);
}
60% {
-webkit-transform: translateY(-30px);
}
80% {
-webkit-transform: translateY(10px)
}
100% {
-webkit-transform: translateY()
}
}
#-moz-keyframes bounceInUp {
0% {
-moz-transform: translateY(2000px);
}
60% {
-moz-transform: translateY(-30px);
}
80% {
-moz-transform: translateY(10px)
}
100% {
-moz-transform: translateY()
}
}
#-ms-keyframes bounceInUp {
0% {
-ms-transform: translateY(2000px);
}
60% {
-ms-transform: translateY(-30px);
}
80% {
-ms-transform: translateY(10px)
}
100% {
-ms-transform: translateY()
}
}
#-o-keyframes bounceInUp {
0% {
-o-transform: translateY(2000px);
}
60% {
-o-transform: translateY(-30px);
}
80% {
-o-transform: translateY(10px)
}
100% {
-o-transform: translateY()
}
}
#keyframes bounceInUp {
0% {
transform: translateY(2000px);
}
60% {
transform: translateY(-30px);
}
80% {
transform: translateY(10px)
}
100% {
transform: translateY()
}
}
.bounceInUp {
-webkit-animation-name: bounceInUp;
-moz-animation-name: bounceInUp;
-ms-animation-name: bounceInUp;
-o-animation-name: bounceInUp;
animation-name: bounceInUp;
}
#noposts {
color: white;
font-size: 39px;
font-family:'Roboto';
position: relative;
left: 440px;
bottom: 100px;
}
#fourthspan {
color: #2c3e50;
font-family:'Roboto';
font-size: 39px;
position: relative;
left: 70px;
top: 75px;
}
ul#allposts li{
min-height: 140px;
width: 500px;
position: relative;
left: 239px;
bottom: 432px;
}
.thecolor2{
height: 50px;
width: 50px;
border-radius: 100px;
background-color: #2AC0A3;
position: relative;
bottom: 591px;
left: 325px;
}
ul{
list-style-type: none;
}
.composeheader2{
height: 80px;
width: 500px;
background-color:#2AC0A3;
position: relative;
bottom: 581px;
left: 325px;
color: white;
}
.secondspan2{
color: white;
font-family:'Roboto';
font-size: 40px;
background-color: #2AC0A3;
border: 1px solid #2AC0A3;
position: relative;
left: 17px;
top: 13px;
}
.body2{
min-height: 80px;
overflow: hidden;
width: 500px;
background-color: #C6EEE6;
position: relative;
left: 325px;
bottom: 371px;
-moz-box-sizing: border-box;
box-sizing: border-box;
-ms-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
JS for second experiment:
var clicktwice = false;
var color;
var forrgb;
var finalrgb2;
var myheader;
//198 238 230
//rgb(42, 192, 163) #2AC0A3
//rgb(198, 238, 230) #C6EEE6
//+156, +46, +67
$('#fourthspan').hide();
$('#thecolor').hide();
$('.bubble').hide();
$('#composeheader').hide();
$('#body').hide();
$('#compose').click(function () {
setInterval(function () {
$('#noposts').fadeTo(10, 0);
}, 3000);
});
$("#thehex").keyup(function () {
color = $("#thehex").val();
forrgb = $("#thehex").val();
$("#thecolor").css("background-color", color);
$("#secondspan").css("background-color", color);
$("#secondspan").css("border-color", color);
$("#composeheader").css("background-color", color);
forrgb = $('#thehex').val().replace('#', '');
var reg = forrgb.length === 3 ? forrgb[0] + forrgb[0] + forrgb[1] + forrgb[1] + forrgb[2] + forrgb[2] : forrgb;
var conv = reg.match(/.{2}/g);
var r = parseInt(conv[0], 16);
r = r + 156;
var g = parseInt(conv[1], 16);
g = g + 46;
var b = parseInt(conv[2], 16);
b = b + 67;
var rgb = r + ',' + g + ',' + b;
rgb = rgb.replace(/NaN/g, ' ... ');
var finalrgb = ('rgb(' + rgb + ')');
finalrgb2 = finalrgb;
$("#body").css("background-color", finalrgb);
});
$('#compose').click(function () {
if (clicktwice === false) {
color = "#2AC0A3";
finalrgb2 = "rgb(198, 238, 230)";
$("#secondspan").val("Write Header Here:");
$('#thirdspan').text("Write context text here:");
$('#thehex').val(color);
$("#thecolor").css("background-color", color);
$("#secondspan").css("background-color", color);
$("#secondspan").css("border-color", color);
$("#composeheader").css("background-color", color);
$("#body").css("background-color", finalrgb2);
$('#thecolor').fadeTo(0, 1);
$('#body').fadeTo(0,1);
$('.bubble').fadeTo(0,1);
$('#composeheader').fadeTo(0, 1);
$('#firstspan').hide();
$('#fourthspan').show();
$('#thecolor').show();
$('.bubble').show();
$('#composeheader').show();
$('#body').show();
$(".composeheader2").animate({
bottom: '-=248px'
}, 400);
$(".body2").animate({
bottom:'-=248px'
}, 400);
$(".thecolor2").animate({
bottom:'-=245px'
}, 400);
$('#thecolor').addClass('box animated bounceInDown');
$('.bubble').addClass('box animated bounceInDown');
$('#composeheader').addClass('box animated bounceInDown');
$('#body').addClass('box animated bounceInDown');
clicktwice = true;
} else if (clicktwice === true) {
myheader = $("#secondspan").val();
$('.bubble').fadeTo(300, 0);
$('#firstspan').show();
$('#fourthspan').hide();
clicktwice = false;
var thestream = document.getElementById('allposts');
var oneofpost = document.createElement('li');
var thecolor2 = document.createElement('div');
thecolor2.className = "thecolor2";
var composeheader2 = document.createElement('div');
composeheader2.className = "composeheader2";
var secondspan2 = document.createElement('span');
secondspan2.className = "secondspan2";
var body2 = document.createElement('div');
body2.className = "body2";
var thirdspan2 = document.createElement('span');
thirdspan2.className = "thirdspan2";
var bodytext = $('#thirdspan').html();
thirdspan2.innerHTML = bodytext;
body2.style.backgroundColor = finalrgb2;
secondspan2.innerHTML = myheader;
thecolor2.style.backgroundColor = color;
composeheader2.style.backgroundColor = color;
secondspan2.style.backgroundColor = color;
secondspan2.style.borderColor = color;
$('#thecolor').fadeTo(0, 0);
$('#body').fadeTo(0, 0);
$('#composeheader').fadeTo(0, 0);
thestream.appendChild(body2);
thestream.appendChild(thecolor2);
thestream.appendChild(composeheader2);
composeheader2.appendChild(secondspan2);
body2.appendChild(thirdspan2);
$('#thecolor').removeClass('box animated bounceInDown');
$('.bubble').removeClass('box animated bounceInDown');
$('#composeheader').removeClass('box animated bounceInDown');
$('#body').removeClass('box animated bounceInDown');
}
});

I've cleaned this up A LOT, the code should be much easier to read and follow now:
HTML
<script id="empty-message" type="html/template">
<div class="message new box animated bounceInDown">
<div class="thecolor"></div>
<div class="bubble">
<input type="text" class="hexcolor" value="#2AC0A3" />
</div>
<div class="composeheader">
<input type="text" value="Write Header Here:" />
</div>
<div class="body">
<span contenteditable="true">Write context text here:</span>
</div>
</div>
</script>
<div id="message-actions">
<span class="compose">Compose</span>
<span class="post">Post</span>
</div>
<div id="no-posts">- No Posts Yet -</div>
<div id="all-posts"></div>
JavaScript
var getRGB = function(color) {
var rgb = color.replace('#', '');
rgb = rgb.length === 3 ? rgb[0] + rgb[0] + rgb[1] + rgb[1] + rgb[2] + rgb[2] : rgb;
var conv = rgb.match(/.{2}/g);
var r = parseInt(conv[0], 16) + 156;
var g = parseInt(conv[1], 16); + 46;
var b = parseInt(conv[2], 16); + 67;
rgb = r + ',' + g + ',' + b;
rgb = rgb.replace(/NaN/g, ' ... ');
rgb = ('rgb(' + rgb + ')');
return rgb;
};
$(document).ready(function() {
$('#all-posts').on('keyup', '.message.new .hexcolor', function () {
var color = $(this).val();
$(".message.new .thecolor, .message.new .composeheader").css("background-color", color);
$(".message.new .body").css("background-color", getRGB(color));
});
$('#message-actions').click(function () {
if ($('.compose').is(':visible')) {
$('#all-posts').prepend($('#empty-message').html());
} else {
var $message = $('#all-posts .message:first').removeClass('new box animated bounceInDown');
$message.find('.composeheader > input').attr('readonly', true);
$message.find('.body > span').attr('contenteditable', false);
}
$('#no-posts').hide();
$('.compose, .post').toggle();
});
});
CSS
#import url(http://fonts.googleapis.com/css?family=Roboto:100);
/* css for animation */
.animated {
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-ms-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-ms-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
}
.animated.hinge {
-webkit-animation-duration: 2s;
-moz-animation-duration: 2s;
-ms-animation-duration: 2s;
-o-animation-duration: 2s;
animation-duration: 2s;
}
#-webkit-keyframes bounceInDown {
0% {
-webkit-transform: translateY(-2000px);
}
60% {
-webkit-transform: translateY(30px);
}
80% {
-webkit-transform: translateY(-10px)
}
100% {
-webkit-transform: translateY()
}
}
#-moz-keyframes bounceInDown {
0% {
-moz-transform: translateY(-2000px);
}
60% {
-moz-transform: translateY(30px);
}
80% {
-moz-transform: translateY(-10px)
}
100% {
-moz-transform: translateY()
}
}
#-ms-keyframes bounceInDown {
0% {
-ms-transform: translateY(-2000px);
}
60% {
-ms-transform: translateY(30px);
}
80% {
-ms-transform: translateY(-10px)
}
100% {
-ms-transform: translateY()
}
}
#-o-keyframes bounceInDown {
0% {
-o-transform: translateY(-2000px);
}
60% {
-o-transform: translateY(30px);
}
80% {
-o-transform: translateY(-10px)
}
100% {
-o-transform: translateY()
}
}
#keyframes bounceInDown {
0% {
transform: translateY(-2000px);
}
60% {
transform: translateY(30px);
}
80% {
transform: translateY(-10px)
}
100% {
transform: translateY()
}
}
.bounceInDown {
-webkit-animation-name: bounceInDown;
-moz-animation-name: bounceInDown;
-ms-animation-name: bounceInDown;
-o-animation-name: bounceInDown;
animation-name: bounceInDown;
}
#-webkit-keyframes bounceInUp {
0% {
-webkit-transform: translateY(2000px);
}
60% {
-webkit-transform: translateY(-30px);
}
80% {
-webkit-transform: translateY(10px)
}
100% {
-webkit-transform: translateY()
}
}
#-moz-keyframes bounceInUp {
0% {
-moz-transform: translateY(2000px);
}
60% {
-moz-transform: translateY(-30px);
}
80% {
-moz-transform: translateY(10px)
}
100% {
-moz-transform: translateY()
}
}
#-ms-keyframes bounceInUp {
0% {
-ms-transform: translateY(2000px);
}
60% {
-ms-transform: translateY(-30px);
}
80% {
-ms-transform: translateY(10px)
}
100% {
-ms-transform: translateY()
}
}
#-o-keyframes bounceInUp {
0% {
-o-transform: translateY(2000px);
}
60% {
-o-transform: translateY(-30px);
}
80% {
-o-transform: translateY(10px)
}
100% {
-o-transform: translateY()
}
}
#keyframes bounceInUp {
0% {
transform: translateY(2000px);
}
60% {
transform: translateY(-30px);
}
80% {
transform: translateY(10px)
}
100% {
transform: translateY()
}
}
.bounceInUp {
-webkit-animation-name: bounceInUp;
-moz-animation-name: bounceInUp;
-ms-animation-name: bounceInUp;
-o-animation-name: bounceInUp;
animation-name: bounceInUp;
}
/* page */
body {
background-color: #2D3E50;
font-family:'Roboto';
min-width: 960px;
}
/* message compose */
.message {
margin-top: 40px;
}
.composeheader {
background-color:#2AC0A3;
color: white;
padding: 10px 15px;
clear: both;
}
.composeheader INPUT {
color: white;
font-size: 40px;
background-color: transparent;
border-width: 0;
font-family: 'Roboto';
}
.body {
min-height: 80px;
overflow: hidden;
padding: 20px;
background-color: #C6EEE6;
-moz-box-sizing: border-box;
box-sizing: border-box;
-ms-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.body > span {
color: black;
outline: 0px solid transparent;
}
.thecolor {
height: 50px;
width: 50px;
background-color: #2AC0A3;
border-radius: 100px;
float: left;
margin-bottom: 10px;
}
.bubble { display: none; }
.message.new .bubble {
height: 50px;
padding: 0px;
background: #FFFFFF;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
float: left;
margin-left: 20px;
display: block;
}
.bubble:after {
content:'';
position: absolute;
border-style: solid;
border-width: 10px 15px 10px 0;
border-color: transparent #FFFFFF;
display: block;
width: 0;
z-index: 1;
left: 55px;
top: 15px;
}
.hexcolor {
font-size: 20px;
height: 30px;
width: 100px;
background-color: transparent;
border-width: 0px;
margin: 10px 5px
}
/* compose button */
#message-actions {
height: 215px;
width: 215px;
background-color: #EBF1F1;
border-radius: 150px;
position: relative;
color: #2c3e50;
-webkit-transition: all 0.15s linear;
-moz-transition: all 0.15s linear;
transition: all 0.15s linear;
float: left;
margin: 40px 100px 10px;
}
#message-actions:hover {
background-color: #219B86;
color: #EBF1F1;
}
#no-posts {
color: white;
font-size: 39px;
float: left;
margin-top: 120px;
}
.compose {
font-size: 39px;
position: relative;
left: 22px;
top: 75px;
}
.post {
color: #2c3e50;
font-size: 39px;
position: relative;
left: 70px;
top: 75px;
display: none;
}
/* messages */
#all-posts {
min-height: 140px;
width: 500px;
float: left;
}
jsFiddle Demo
Use meaningful names for your ids and css classes, it makes the code much easier to follow and understand what is going on. Styles such as "firstspan" mean nothing and means you have to keep looking back at the markup to figure out context.
I've cleaned this up as best I can, I'm not good with CSS3 or the animation stuff, I'll leave it to you to fix that up. I think this should be working exactly as you expect now, messages slide down and are added to the stack top down.
EDIT 2:
I changed a lot of the ID selectors to use and refactored the code to make it much simpler. You were also setting the ID on the newly created elements which were all the same, this is wrong and will cause you issues further down the line (ID's should be unique per page).
I cleaned up the JS, combining multiple statements which did the same thing with different selectors. You were using a lot of standard JavaScript getElementById type calls, I changed these create the DOM elements using jQuery instead.
I used an html/template script declaration to create the new elements, it's much cleaner than using jQuery to built up your new DOM elements. Also, your compose and post elements were essentially the same thing. Don't repeat CSS styles, either combine multiple selectors, or just re-use the same structure as I have done. Hopefully the changes make sense.