Попытка сохранить все выбранные значения в поле множественного выбора

Question

Мне нужно сохранить все выбранные значения (параметры), когда я нажимаю «Отправить» (Сохранить). Но когда я сохраняю эти значения в файле XML после нажатия кнопки «Сохранить», он просто сохраняет последний выбранный параметр внутри дочернего «класса» из сгенерированного файла XML.

Я уже нашел много предложений, но у меня все еще не работает. Как сохранить все выбранные значения?

Вот мой код ниже. Я просто хочу сказать, что я новичок в PHP, мне нужна помощь, пожалуйста.

    <?php
    if(isset($_POST['submitSave'])) {
    // Disable errors due to empty xml files
        error_reporting(E_ALL & ~E_WARNING);

        $domDoc = new DOMDocument('1.0', 'UTF-8');
        $domDoc->preserveWhiteSpace = false;
        $domDoc->formatOutput = true;
        $domDoc->encoding = 'UTF-8';
        $domDoc->load('./data/expression.xml');
        $xpath = new DOMXpath($domDoc);


        if($domDoc->getElementsByTagName('expression')->length>0){
            // If we already have expression tag defined
            $expression = $domDoc->getElementsByTagName('expression')[0];
        }else{
            // If we don't have any expression tag, i.e. file is empty
            $expression = $domDoc->createElement('expression');
        }

    $vocabulario = $domDoc->createElement('vocabulario');
    $vocabulario->setAttribute('word', $_POST['word']);
    $classe = $domDoc->createElement('classe', $_POST['classe']);

    $domDoc->appendChild($expression);
    $expression->appendChild($vocabulario);
    $vocabulario->appendChild($classe);

    file_put_contents('./data/expression.xml', $domDoc->saveXML());
    header('location:index.php');

}
?>

<form method="post">
<div class="col-75">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css" rel="stylesheet" />
  <select class="classe classe-select" name="classe" required>
    <option value="| adjective |">adjective</option>
    <option value="| adverb |">adverb</option>
    <option value="| noun |">noun</option>
    <option value="| verb |">verb</option>
  </select>
<br>
<ol id="classe" start='0'></ol>
  <script type="text/javascript">
    $(document).ready(function() {

  // Create an empty array to store results
  var selected = [];

  // Delegate the change event on each .addon-select
  $('.classe-select').on('change', function() {

    // Store this .addon-select's value
    var result = $(this).val();

    // .push() the value into the selected array
    selected.push(result);

    $('#classe').append('<li>' + result + '</li>');

    // Display the selected array on console
    console.log(selected);

  });
  </script>
</div>

<div class="row">
  <td><input type="submit" value="Save" name="submitSave"></td>
</div>