How do I get the value of data-id in the li tag?

1. Do you get the selected data-id value for taste and packaging when you click to add to the shopping cart or buy now?
clipboard.png 

<div class="theme-options">
 <div class="cart-title"></div>
   <ul>                                               
    <li class="sku-line selected" id="taste" data-id="1"></li>
    <li class="sku-line" id="taste" data-id="2"></li>
    <li class="sku-line" id="taste" data-id="3"></li>
   </ul>
 </div>
<div class="theme-options">
   <div class="cart-title"></div>
      <ul id="test">
       <li class="sku-line selected" data-id="1"><i></i></li>
       <li class="sku-line" data-id="2"><i></i></li>
       <li class="sku-line" data-id="3"><i></i></li>
       </ul>
     </div>
     
<li>
   <div class="clearfix tb-btn tb-btn-buy theme-login">
     <a id="LikBuy" title="" href="-sharp"></a>
    </div>
</li>
   <li>
     <div class="clearfix tb-btn tb-btn-basket theme-login">
      <a id="LikBasket" title=""><i></i></a>
       </div>
   </li>

now you can only get the taste of data-id,. How to click add Shopping cart to get the value of taste data-id and packaged data-id 

$("-sharpLikBasket").on("click", function() {

var id =  $(".sku-line.selected").data("id");
console.log(id);
})
Javascript
Mar.24,2021

it is recommended to give different class names: 

<div class="theme-options">
 <div class="cart-title"></div>
   <ul>                                               
    <li class="sku-line selected sel-flavor" data-id="1"></li>
    <li class="sku-line sel-flavor"  data-id="2"></li>
    <li class="sku-line sel-flavor"  data-id="3"></li>
   </ul>
 </div>
<div class="theme-options">
   <div class="cart-title"></div>
      <ul id="test">
       <li class="sku-line selected sel-pack" data-id="1"><i></i></li>
       <li class="sku-line sel-pack" data-id="2"><i></i></li>
       <li class="sku-line sel-pack" data-id="3"><i></i></li>
       </ul>
     </div>

then when you click the "add Shopping cart" button: 

$("-sharpLikBasket").click(function(){
   console.log($(".sel-flavor.selected").data("id"))//data-id
   console.log($(".sel-pack.selected").data("id"))//data-id
})

add that id should not be repeated on the same page. 

id="taste" //liidid

if there is a reference to jQuery: 

$('.sku-line').on('click', function() {
    var id = $(this).data('id');
    console.log(id);
})

.
this question is very simple.

generally similar problems can be solved in the same way,

your selection does not turn red, it should contain some class

Click to add the shopping cart traversal element to see if there is a class.

the second method,

set a variable in js, initially null

Click on an element to get the data-id assignment to the variable.
Click the add Shopping cart button to get it.

Previous: Vim 8.1.152 cannot copy text to the pasteboard using `V "* y`

Next: The disk enclosure id obtained by Megacli is NumberA.

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-436a4e8-4d44.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-436a4e8-4d44.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?