How can the text be displayed in the toastr alert library based on a text found in a paragraph tag with a specific id?

I use the toastr alert library to display notifications. The library works in principle, but there are some errors associated with its functionality, which are as follows:

First: The alert properties do not work, such as the progress bar, close button, alert position, etc.

Second: The text displayed in the alert should be retrieved from the paragraph tag in the HTML code with the id “toastr text”.

Please correct my code with the appropriate suggestions.

const translations = {

              en: {

                home: "Home",

                about: "About",

                contact: "Contact us",

                selectLanguage: "Select a language",

                english: "English",

                arabic: "Arabic",

              },

              ar: {

                home: "الصفحة الرئيسية",

                about: "من نحن",

                contact: "تواصل معنا",

                selectLanguage: "إختر لغة",

                english: "الانجليزية",

                arabic: "العربية",

              },

            };

     

            const languageSelector = document.querySelector("select");

            languageSelector.addEventListener("change", (event) => {

              setLanguage(event.target.value);

            });

           

            const setLanguage = (language) => {

              const elements = document.querySelectorAll("[data-i18n]");

              elements.forEach((element) => {

                const translationKey = element.getAttribute("data-i18n");

                element.textContent = translations[language][translationKey];

              });

              document.dir = language === "ar" ? "rtl" : "ltr";

            };

            toastr.success('')// display the Toastr text here 

          toastr.options = {

            "closeButton": true,

            "debug": false,

            "newestOnTop": false,

            "progressBar": true,

            "positionClass": "toast-top-center",

            "preventDuplicates": false,

            "onclick": null,

            "showDuration": "300",

            "hideDuration": "1000",

            "timeOut": "5000",

            "extendedTimeOut": "1000",

            "showEasing": "swing",

            "hideEasing": "linear",

            "showMethod": "fadeIn",

            "hideMethod": "fadeOut"

          }

<!DOCTYPE html>

<html>

  <head>

    <meta charset="UTF-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link

      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"

      rel="stylesheet"/>

      <link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.0.1/css/toastr.css" rel="stylesheet"/>

      <title>Multi Language Translation</title>

  </head>

  <body>

    <div class="container">

      <nav class="navbar navbar-expand-lg navbar-light justify-content-center">

        <div>

          <ul class="navbar-nav">

            <li class="nav-item">

              <a class="nav-link" lang="en" data-i18n="home">Home</a>

            </li>

            <li class="nav-item">

              <a class="nav-link" data-i18n="about">About</a>

            </li>

            <li class="nav-item">

              <a class="nav-link" data-i18n="contact">Contact us</a>

            </li>

          </ul>

        </div>

      </nav>

      <h3 class="text-primary" data-i18n="selectLanguage">Select a language</h3>

      <select class="p-1 mt-2">

        <option value="en" data-i18n="english" selected>English</option>

        <option value="ar" data-i18n="arabic">Arabic</option>

      </select>

      <p id="Toastr text">toastr text</p>

    </div>

    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>

    </body>

</html>