JSFiddle - React, Tailwind, and code Playground

by andrey90vs

HTML

<select multiple="multiple" name="section_1" class="section_1">
    <option value="1" class="11 parent">Option Pa1</option>
    <option value="2"  class="11">Option 2</option>
    <option value="3" class="11">Option 3</option>
    <option value="11" class="11">Option 1</option>
    <option value="22" class="22 parent">Option Pa2</option>
    <option value="33" class="22">Option 3</option>
    <option value="44" class="22">Option 4</option>
</select>

<div class="pa1">Select all Option Pa1</div>
<div class="pa2">Select all Option Pa2</div>

JavaScript

$('.pa1').click(function() {
   $('.section_1 .11').prop('selected', true);
});
$('.pa2').click(function() {
   $('.section_1 .22').prop('selected', true);
});