jquery - attr of multiple img id show in line -

in code have 5 images in li tag , first li having activeimg class . have 1 button .i want when click button current li should remove activeimg class next li , attr('id') of first li img should show , again when click next li should remove activeimg class next li , attr should show along first li's img attr('id').

$(document).ready(function() {    $('.clickme').on('click', function() {      var tagname = $('.activeimg img').attr('id');      $('.activeimg').removeclass('activeimg').next('#allimg li').addclass('activeimg');      $('#resultdiv').html(tagname).val;    });  });

.menu_card ul {    list-style-type: none;  }    .menu_card ul li img {    width: 200px;    height: 300px;  }    .menu_card ul li {    list-style-type: none;    position: absolute;    display: none;  }    .menu_card ul li.activeimg {    list-style-type: none;    position: absolute;    display: block;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div class="container">    <form method="post" action="">      <div class="row">        <div class="col-12">          <div class="menu_card">            <ul id="allimg">              <li class="activeimg"><img id="one" src="imges/img1.jpg"></li>              <li><img id="two" src="imges/img2.jpg"></li>              <li><img id="three" src="imges/img3.jpg"></li>              <li><img id="four" src="imges/img4.jpg"></li>              <li><img id="five" src="imges/img5.jpg"></li>            </ul>          </div>        </div>      </div>      <div class="row">        <div class="col-2" style="margin-top: 350px;">          <div class="pull-right clickme">            <i class="fa fa-thumbs-o-up fa-3x"></i> <br/>          </div>        </div>      </div>      <div class="row">        <div class="col-12 text-center" id="resultdiv">        </div>      </div>    </form>  </div>

in code can see img attr of current li's . in case replace previous 1 when click second li shows 2 , 1 erased . want shown one,two,three,four,five not individual attr.

suggest me if have checkbox method or else. in advance

my code

based on fiddle tried click handler:

var tagname = $('.activeimg img').attr('id');  $('.activeimg').removeclass('activeimg').next('#allimg li').addclass('activeimg');  if (tagname) {     var result = $('#resultdiv');     var text = result.text().trim();      if (text) {         text += ',';     }      result.text(text + tagname); } 

that seems give behaviour requested.

i left first 2 lines unaltered, rest builds text. thing makes complicated need commas between ids.

using dom store state (reading , writing element text) not ideal tried not deviate far original code. could, example, have array holding list of liked images , generate element text rather relying on old text.