How to replace li elements which have the same id in Javascript and Laravel

I have a list of sizes and colors, each color has one or multiple size and each size has one or multiple colors. What I want is when I click a certain size it should show his colors that are available in full opacity and unavailable colors to have lower opacity(0.5 opacity). So far when I click the size it just adding the available colors to the list of colors and make them as duplicates how can replace available colors to the list of colors? and have something similar to this

Blade file

  <ul id="Sizes">  //This displays all the sizes by default
   @foreach($variantSizes as $variantSize)
   <li id="" name="size" value="">
      <span ></span>
   </li>
   @endforeach
  </ul>

 <ul id="Colors">  //This displays all the colors
   @include('front.colors')
   @foreach($variantColors  as $variantC)
   <li id="" name="color" style="opacity:0.5;" value=""> 
   </li>
   @endforeach
</ul>

Controller

public function getColors(Request $request){ 
if($request->ajax())
{
$data = $request->all(); 
$getColors =\App\Variants::where(['product_id'=>$data['product_id'],'size'=>$data['size']])->get();
return view('front.colors')->with(compact('getColors')); 
 } 
}

front.colors Blade file

  @foreach($getColors  as $getColor)  //This displays available colors from controller
    <li id="" name="color">
      
   </li>
  @endforeach

Javascript

<script>
   var ul = document.getElementById('Sizes'); 
   ul.addEventListener('click', function (e) {
   var target = e.target; 
   while (target && target.parentNode !== ul) {
       target = target.parentNode; 
       if(!target) { return; } 
   }
   if (target.tagName === 'LI'){
       var size = target.id;
       var product_id = target.getAttribute("value")
   }
   $.ajaxSetup({
     headers: {
    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      }
     });
   $.ajax({
         url:'/display-color',
         data:{size:size,product_id:product_id},
         type:'post',
         success:function(resp){
             $("#Colors").append(resp);
         },error:function(){
            alert('error');
         }
     });
   });
</script>

from Newest questions tagged laravel-5 - Stack Overflow https://ift.tt/38CKCVs
via IFTTT