Styjun

The Problem:

I am trying to create a sticker tab with html, php, css and javascript. The sticker tab shows successfully, but I am having problems switching between the tabs.

There is a screenshot below.... The first tab with the stickers show automatically,but on clicking another tab, it disappears. It doesn't change to the next tab... I'm tired

The Question:

How do I change multiple divs with javascript?

What I've Tried:

<a href="#" class="input-group-btn emo-comment dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" >
 <span class="btn btn-file" style="padding:12px 0px 20px 0px; margin-left: -22px;"><i class="mhd mhd24 mhd-sticker-emoji" data-icon="sticker-emoji" onclick="document.getElementById('tab-1<?php echo $wo['story']['id'];?>')"></i></span>
</a>
<ul class="dropdown-menu pull-right">
 <div class="pretty_emoticon<?php echo $wo["story"]["id"];?>">
 <ul class="tabs">
 <li class="tab-link current" data-tab="tab-1<?php echo $wo["story"]["id"];?>"><img class="svgbeloved" src="<?php echo Wo_GetSvg('boys'); ?>"></li>
 <li class="tab-link" data-tab="tab-2<?php echo $wo["story"]["id"];?>"><img class="svgbeloved" src="<?php echo Wo_GetSvg('bear'); ?>"></li>
 <li class="tab-link" data-tab="tab-3<?php echo $wo["story"]["id"];?>"><img class="svgbeloved" src="<?php echo Wo_GetSvg('domba'); ?>"></li>
 <li class="tab-link" data-tab="tab-4<?php echo $wo["story"]["id"];?>"><img class="svgbeloved" src="<?php echo Wo_GetSvg('smiles'); ?>"></li>
 <li class="tab-link" data-tab="tab-5<?php echo $wo["story"]["id"];?>"><img class="svgbeloved" src="<?php echo Wo_GetSvg('cute-girl'); ?>"></li>
 <li class="tab-link" data-tab="tab-6<?php echo $wo["story"]["id"];?>"><img class="svgbeloved" src="<?php echo Wo_GetSvg('sweaty-girl'); ?>"></li>
 <li class="tab-link" data-tab="tab-7<?php echo $wo["story"]["id"];?>"><img class="svgbeloved" src="<?php echo Wo_GetSvg('smile-emoticon'); ?>"></li>
 </ul>
 <div id="tab-1<?php echo $wo["story"]["id"];?>" class="tab-content current" id="buka_twemoji<?php echo $wo["story"]["id"];?>">
 <?php foreach ($wo['boysstickers'] as $code => $name) $code = $code; echo '<span onclick="Wo_AddEmoToCommentInput(' . $wo["story"]["id"] . ', '' . $code . '');"><i class="pointer bv75 bv bv-' . $name . '"></i></span>'; ?>
 </div>
 <div id="tab-2<?php echo $wo["story"]["id"];?>" class="tab-content">
 <?php foreach ($wo['meongemoji'] as $code => $name) $code = $code; echo '<span onclick="Wo_AddEmoToCommentInput(' . $wo["story"]["id"] . ', '' . $code . '');"><i class="pointer bv75 bv bv-' . $name . '"></i></span>'; ?>
 </div>
 <div id="tab-3<?php echo $wo["story"]["id"];?>" class="tab-content">
 <?php foreach ($wo['animalstickers'] as $code => $name) $code = $code; echo '<span onclick="Wo_AddEmoToCommentInput(' . $wo["story"]["id"] . ', '' . $code . '');"><i class="pointer bv75 bv bv-' . $name . '"></i></span>'; ?>
 </div>
 <div id="tab-4<?php echo $wo["story"]["id"];?>" class="tab-content">
 <?php foreach ($wo['reactionstickers'] as $code => $name) $code = $code; echo '<span onclick="Wo_AddEmoToCommentInput(' . $wo["story"]["id"] . ', '' . $code . '');"><i class="pointer bv53 bv bv-' . $name . '"></i></span>'; ?>
 </div>
 <div id="tab-5<?php echo $wo["story"]["id"];?>" class="tab-content">
 <?php foreach ($wo['womencute'] as $code => $name) $code = $code; echo '<span onclick="Wo_AddEmoToCommentInput(' . $wo["story"]["id"] . ', '' . $code . '');"><i class="pointer bv75 bv bv-' . $name . '"></i></span>'; ?>
 </div>
 <div id="tab-6<?php echo $wo["story"]["id"];?>" class="tab-content">
 <?php foreach ($wo['girlcute'] as $code => $name) $code = $code; echo '<span onclick="Wo_AddEmoToCommentInput(' . $wo["story"]["id"] . ', '' . $code . '');"><i class="pointer bv75 bv bv-' . $name . '"></i></span>'; ?>
 </div>
 <div id="tab-7<?php echo $wo["story"]["id"];?>" class="tab-content">
 <h5>People & Smyle</h5>
 <?php foreach ($wo['emotorang'] as $code => $name) $code = $code; echo '<span onclick="Wo_AddEmoToCommentInput(' . $wo["story"]["id"] . ', '' . $code . '');"><i class="pointer twa-lg twa twa-' . $name . '"></i></span>'; ?>
 <h5>Symbol</h5>
 <?php foreach ($wo['emotsimbol'] as $code => $name) $code = $code; echo '<span onclick="Wo_AddEmoToCommentInput(' . $wo["story"]["id"] . ', '' . $code . '');"><i class="pointer twa-lg twa twa-' . $name . '"></i></span>'; ?>
 <h5>Food & Drink</h5>
 <?php foreach ($wo['emotmakanan'] as $code => $name) $code = $code; echo '<span onclick="Wo_AddEmoToCommentInput(' . $wo["story"]["id"] . ', '' . $code . '');"><i class="pointer twa-lg twa twa-' . $name . '"></i></span>'; ?>
 <h5>Nature & Animal</h5>
 <?php foreach ($wo['emotnatural'] as $code => $name) $code = $code;echo '<span onclick="Wo_AddEmoToCommentInput(' . $wo["story"]["id"] . ', '' . $code . '');"><i class="pointer twa-lg twa twa-' . $name . '"></i></span>'; ?>
 <h5>Activity</h5>
 <?php foreach ($wo['emotaktivitas'] as $code => $name) $code = $code;echo '<span onclick="Wo_AddEmoToCommentInput(' . $wo["story"]["id"] . ', '' . $code . '');"><i class="pointer twa-lg twa twa-' . $name . '"></i></span>'; ?>
 <h5>Places & Travel</h5>
 <?php foreach ($wo['emottamasya'] as $code => $name) $code = $code;echo '<span onclick="Wo_AddEmoToCommentInput(' . $wo["story"]["id"] . ', '' . $code . '');"><i class="pointer twa-lg twa twa-' . $name . '"></i></span>'; ?>
 </div>
 </div>
</ul>
<style>
.relevantext-align:center;text-decoration:none!important;text-align:center;font-size:15px;display:-webkit-box;position:relative;font-weight:600;margin:7px;
.pretty_emoticon<?php echo $wo["story"]["id"];?>width: 350px;margin: 0 auto;height:300px;overflow:auto;text-align:center;
ul.tabsmargin: 0px;padding: 0px;list-style: none;
ul.tabs liborder-bottom: 1px #ededed solid;background:none;display: inline-block;padding: 10px 9px;cursor: pointer;
ul.tabs li.currentbackground: #ededed;color: #222;
.tab-contentdisplay:none;padding: 15px;
.tab-content.currentdisplay: inherit;
</style>
<script>
$(document).ready(function()
 $('ul.tabs li').click(function()
 var tab_id = $(this).attr('data-tab');
 $('ul.tabs li').removeClass('current');
 $('.tab-content').removeClass('current');
 $(this).addClass('current');
 $("#"+tab_id).addClass('current');
 )
)
$( "ul.tabs" ).click(function( event ) 
 event.stopPropagation();
);
</script>

https://i.stack.imgur.com/792Z1.jpg