I have two optgroup. Several options on optgroup for Debit purposes and another for Credit Purposes. I'm trying to build a solution in Javascript to show me a div when I chose one of the Debit optgroup options and other div when I choose one of the Credit optgroup options. Nothing works! I question my self if this is the best solution once I need the code also works when I Edit the data.

Here is my code at the moment:

<select onchange="ChangeCategory(event)" type="text" name="rubrica" id="rubrica" class="form-control" required>
                      <optgroup id="debit" label="DESPESAS">
                      <?php
                      $result_rubrica = $dbcondo->query("SELECT * FROM lcs_tipo_rubrica WHERE tipo_rubrica='DÉBITO' order by rubrica ASC");
                      while($row_rubrica = $result_rubrica->fetch()){

                            $selected = "-- escolha uma opção --";

                            $output = '<option value="'.$row_rubrica['rubrica'].'" '.$selected.'>'.$row_rubrica['rubrica_id'].' '.$row_rubrica['rubrica'].'</option>';

                            echo $output;
                            }
                        ?>
                        </optgroup>
                        <optgroup id="credit" label="CREDITOS">
                          <?php
                          $result_rubrica = $dbcondo->query("SELECT * FROM lcs_tipo_rubrica WHERE tipo_rubrica='CRÉDITO' order by rubrica ASC");
                          while($row_rubrica = $result_rubrica->fetch()){

                                //if($row_rubrica['bill_type'] == $_GET['$rubrica']){
                                $selected = "selected";
                                //}else{
                                //  $selected = "-- escolha uma opção --";
                                //}
                                $output = '<option value="'.$row_rubrica['rubrica'].'" '.$selected.'>'.$row_rubrica['rubrica_id'].' '.$row_rubrica['rubrica'].'</option>';

                                //Echo output
                                echo $output;
                                }
                            ?>
                        </optgroup>
                        </select>

And the javascript

function ChangeCategory({ target }) {
if(selected && selected !== target.value) toggleDisplay(selected)
selected = target.value
return toggleDisplay(target.value, 'remove')
}