javascript - jQuery .click.each function -

i made code, there plus (+) image. when click it, rotates, until rotation 45° (x). making through toggleclass ... now, have 7 of images, click event running first one, why? tried each function, still same.. totally lost...

there code jquery:

$("#plus_x").each(function() { $(this).on("click", function(){                 console.log("click!");                 $(this).toggleclass("box_rotate box_transition");                 $("#item").hasclass("open-panel")                      ? ($("#item").delay(250).animate({height: '75px'}),                           $("#item").removeclass("open-panel"))                      : ($("#item").delay(250).animate({height: "300px"}),                          $("#item").addclass("open-panel"));             });     }); 

here's html:

    <div id="timeline">                 <div id="item" style="border-left: 4px solid #8e44ad;">                     <div id="date">                         <h1>31. 5.</h1>                     </div>                      <div id="plus">                         <img id="plus_x" src="plus.png" style="">                     </div>                 </div>                 <div id="item">                     <div id="date">                         <h1>31. 5.</h1>                     </div>                      <div id="plus">                         <img id="plus_x" src="plus.png" style="">                     </div>                 </div>                 <div id="item">                     <div id="date">                         <h1>31. 5.</h1>                     </div>                      <div id="plus">                         <img id="plus_x" src="plus.png" style="">                     </div>                 </div>                 <div id="item">                     <div id="date">                         <h1>31. 5.</h1>                     </div>                      <div id="plus">                         <img id="plus_x" src="plus.png" style="">                     </div>                 </div>             </div> 

and css..:

#item{     height: 75px;     width: 100%;     background-color: white;     border-bottom: 2px solid #464646; }      .item_roll{         height: 275px;     }  .box_rotate {   -webkit-transform: rotate(45deg);  /* chrome, safari 3.1+ */     -moz-transform: rotate(45deg);  /* firefox 3.5-15 */       -ms-transform: rotate(45deg);  /* ie 9 */         -o-transform: rotate(45deg);  /* opera 10.50-12.00 */          transform: rotate(45deg);  /* firefox 16+, ie 10+, opera 12.50+ */ } .box_transition {   -webkit-transition: 0.3s ease-out;  /* chrome 1-25, safari 3.2+ */      -moz-transition: 0.3s ease-out;  /* firefox 4-15 */        -o-transition: 0.3s ease-out;  /* opera 10.50–12.00 */           transition: 0.3s ease-out;  /* chrome 26, firefox 16+, ie 10+, opera 12.50+ */ }  #date{     width: 50%;     float: left; }  #plus{     width: 75px;     height: 75px;     float: right;     padding: 22.5px; } 

hope, have maximum information fix problem. of corse, there link website, @ bottom of page, check out, try it... please me

thanks

note!

looks pretty weird in edge, don't know why....

the id attribute in html must have unique values, cannot repeat same id value different elements do.

to solve this, replace these id="plus_x" attributes class="plus_x" , each on $(".plus_x") selector.

however, have same problem other id properties values item, date , plus, need solve in similar way, in css.

finally, purpose not necessary each, can define click handler matches in 1 go. you'll need find .item belonging clicked item, can .closest():

$(".plus_x").on("click", function(){     console.log("click!");     $(this).toggleclass("box_rotate box_transition");     // ancestor has "item" class:     var $item = $(this).closest(".item");     $item.delay(250).animate({         height: $item.hasclass("open-panel") ? '75px' : '300px'     });     $item.toggleclass("open-panel"); });