JavaScript print info of an array inside an array of object in a html section

I have this array of object that contains info string number array

I’m trying to print all the info of touristActivities inside an html <section>

I want to print first the information of stepOne in a section tag then the information of stepTwo in another section tag

touristActivities array can contain more the these two steps

my code below i can only print the info without the section

How can i print the info of each steps inside a different section for each step

example:

<section class="stepOne">
all step One information
</section>

<section class="stepTwo">
all step Two information
</section>

const database = [{
    sectorId: 1,
    sectorName: "السياحة",
    sectorIcon: "icon-1.png",
    sectorN: "tourism",
    licenseTitle: ["إصدار ترخيص مرافق الإيواء السياحي", "الأنشطة السياحية"],
    licenseDesc: ["تقديم خدمات الترخيص لنشاط الفنادق والشقق المخدومة والمخيمات  والنزل وفنادق الكبائن والشاليهات.", "تقديم خدمات الترخيص لوكالات السياحة والسفر وتنظيم الرحلات السياحية وحجز وحدات الإيواء السياحي وتسويقها."],
    licenseNum: ["7960", "7961"],
    touristActivities: [
        stepOne = {
            subTitle: "إصدار رخصة استثمار للمستثمر الأجنبي",
            description: "إصدار رخصة استثمار لغير السعوديين لمزاولة الأنشطة التجارية بما يتوافق مع الاشتراطات والمتطلبات المحددة.",
            },
       stepTwo = {
           subTitle: "إصدار سجل تجاري",
           description: "وثيقة قانونية تحتوي على بيانات التاجر والنشاط التابع له تمكنه من مزاولة نشاطه بتصريح رسمي وفق الاشتراطات والمتطلبات المحددة.",
                }
        ]
},
{
    sectorId: 2,
},
];

let title = document.querySelector(".title");
let rightSection = document.querySelector('.right');

function getInfo(id) {
for (let i = 0; i < database.length; i++) {
    if (database[i].sectorId === parseInt(id)) {
        title.innerHTML += `<img src='img/${database[i].sectorIcon}' alt='image'>`;
        title.innerHTML += `<h2>${name}</h2>`;
        for (let j = 0; j < database[i].touristActivities.length; j++) {
            subTitle(database[i].touristActivities[j].subTitle);
            description(database[i].touristActivities[j].description);
        }
    }
}
}
getInfo(1);

function subTitle(st) {
let subTitle = `<div class='subTitle'>
<h3>${st}</h3>
</div>`;
rightSection.innerHTML += subTitle;
}

function description(desc) {
    let description = `
    <div class="discription">
    <div class="description-inner parent">
        <div class="descText">
            <img src="img/description.png" alt="desc">
            <h4>وصف الخطوة</h4>
        </div>
        <i class="fas fa-angle-down"></i>
    </div>
    <div class="descInfo toggle">
    <p>${desc}</p>
    </div>
</div>
    `;
    rightSection.innerHTML += description;
}

        <div class="container">
            <div class="title">

            </div>
            <div class="right">
                <div class="subTitle">
                    
                </div>
               
            </div>
            <div class="left"></div>
        </div>

Answer

The thing is your functions directly modify the HTML. It is tightly coupled. So you lose quite a bit of control over the output. With your code the sequence of these function calls is important because the output will depend on the calls. E.g. first description() must be followed by time(). Now you want to wrap all this, but you have already written it to the DOM.

The sections span the content you want to generate from each step. Therefore, they have to wrap everything inside the for-loop there.

Instead of directly modifying the DOM, write the output of your functions to an array buffer. After the loop you will attach the whole content that you have created to the section element.

So you return the HTML from your functions, store it into the array buffer and once you looped over the section, you can combine/add the content with buffer.join('') and close it.

This way, you split the generators from the assembly code.

Here is a working example:

const database = [{
    sectorId: 1,
    sectorName: "السياحة",
    sectorIcon: "icon-1.png",
    sectorN: "tourism",
    licenseTitle: ["إصدار ترخيص مرافق الإيواء السياحي", "الأنشطة السياحية"],
    licenseDesc: ["تقديم خدمات الترخيص لنشاط الفنادق والشقق المخدومة والمخيمات  والنزل وفنادق الكبائن والشاليهات.", "تقديم خدمات الترخيص لوكالات السياحة والسفر وتنظيم الرحلات السياحية وحجز وحدات الإيواء السياحي وتسويقها."],
    licenseNum: ["7960", "7961"],
    touristActivities: [
      stepOne = {
        subTitle: "إصدار رخصة استثمار للمستثمر الأجنبي",
        description: "إصدار رخصة استثمار لغير السعوديين لمزاولة الأنشطة التجارية بما يتوافق مع الاشتراطات والمتطلبات المحددة.",
        duration: "يوم واحد",
        money: "٢٠٠٠",
        year: "سنة - ٥",
        concernedParty: ["وزارة الاستثمار"],
        concernedPartyLogo: ["thumbnail_2.png"],
        address: "<iframe src='https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3622.702432314261!2d46.721452214877665!3d24.771389754922634!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3e2efd91f30ee055%3A0x13c696d4f4a80ec3!2sHRSD%20Ministry!5e0!3m2!1sen!2slb!4v1639075198016!5m2!1sen!2slb' width='100%' height='180' style='border:0;' allowfullscreen='' loading='lazy'></iframe>",
        phone: "١٩٩١١",
        website: "https://hrsd.gov.sa/ar",
        mail: "[e-mail]",
        requirements: ["ألا يكون النشاط الاستثماري ضمن قائمة الأنشطة المستثناة من الاستثمار الأجنبي.", "أن تكون مواصفات المنتج مطابقة للمواصفات السعودية أو الخليجية أو الدولية.", "ألا يكون طالب الترخيص قد صدرت ضده قرارات نهائية بسبب مخالفات لأحكام النظام داخل المملكة أو خارجه.", "أن يلتزم طالب الترخيص بالشروط والتعهدات الملحقة بنموذج طلب الترخيص الاستثماري.", "أن يحقق منح الترخيص أهداف الاستثمار وتطبيق هذه الشروط والضوابط على طلبات تجديد الترخيص."],
        needs: [
          "صورة السجل التجاري وعقد التأسيس للمنشاة في بلدها مصدقة من الجهات المختصة والسفارة السعودية.",
          "صورة من حجز الاسم التجاري من وزارة التجارة.",
          "مشروع عقد تأسيس شركة ذات مسؤولية محدودة صورة من.",
          "مشروع عقد التأسيس والنظام الأساسي للشركة المساهمة صورة من.",
          "إرفاق قرار الشركاء رغبتهم في الاستثمار في المملكة موضحاً به أسماء الشركاء ورأس المال ونسبة ملكية كل شريك والمركز الرئيس للمنشأة وطبيعة النشاط.",
          "تعيين المدير العام وتحديد صلاحياته مصدقًا من الجهات المختصة والسفارة السعودية.",
          "صورة من جواز السفر للمدير العام.",
          "صورة من الهوية الوطنية وبطاقة العائلة إذا كان أحد الشركاء يتمتع بالجنسية السعودية.",
          "صورة من السجل التجاري لإثبات المهنة أو مستخرج من الأحوال المدنية.",
          "تقديم موافقة مبدئية من الوزارات أو الهيئات المعنية إن كان النشاط يتطلب موافقة.",
          "تقديم خطة عمل تفصيلية.",
          "تقديم ميزانية للمنشاة طالبة الترخيص من خارج المملكة لفترة لا تقل عن 3 سنوات توضح سلامة الوضع المالي معتمدة من مكتب محاسبي ومصدقة من الجهاز المعني ومن سفارة المملكة.",
          "إثبات القدرة المالية على الاستثمار بما يتناسب مع رأس مال المشروع وحصة كل شريك وبما يتناسب مع خطة العمل المقدمة."
        ],
        linkTitle: "اضغط لاصدار الرخصة عبر المركز السعودي للأعمال",
        link: "https://www.ncc.gov.sa/ar/Pages/default.aspx",
      },
      stepTwo = {
        subTitle: "إصدار سجل تجاري",
        description: "وثيقة قانونية تحتوي على بيانات التاجر والنشاط التابع له تمكنه من مزاولة نشاطه بتصريح رسمي وفق الاشتراطات والمتطلبات المحددة.",
        duration: "حسب التصنيف",
        money: "حسب التصنيف",
        year: "",
        concernedParty: ["وزارة التجارة"],
        concernedPartyLogo: ["thumbnail_1.png"],
        address: "<iframe src='https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3622.702432314261!2d46.721452214877665!3d24.771389754922634!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3e2efd91f30ee055%3A0x13c696d4f4a80ec3!2sHRSD%20Ministry!5e0!3m2!1sen!2slb!4v1639075198016!5m2!1sen!2slb' width='100%' height='180' style='border:0;' allowfullscreen='' loading='lazy'></iframe>",
        phone: "١٩٩١١",
        website: "https://hrsd.gov.sa/ar",
        mail: "[e-mail]",
        requirements: ["ألا يقل العمر عن 18 سنة.", "ألا يكون موظف حكومي.", "ألا يقل رأس المال عن 5000 ر.س.", "لا يشترط إصدار سجل فرعي إذا كان بنفس النشاط وبنفس المنطقة الإدارية."],
        needs: [
          "تقديم طلب لتأسيس الشركة إلكترونيًا عبر بوابة أعمال الشركات. aamal.sa",
          "خطاب موقع من المؤسسين بتأسيس الشركة.",
          "صورة بطاقة الأحوال.",
          "ألا يقل رأس المال عن 500,000 ريال.",
          "صورة من مشروع نظام الشركة الأساسي وعقد تأسيس الشركة.",
          "مشروع نظام الشركة الأساسي وعقد تأسيس الشركة.",
          "خطاب من الشركة بإصدار فرع شركة يتضمن مدينة الفرع ومدير الفرع مصدق من الغرفة التجارية.",
          "التأكيد على المستثمر بالإيداع بعد انتهاء السنة المالية للشركة."
        ],
        linkTitle: "اضغط لاصدار الرخصة عبر المركز السعودي للأعمال",
        link: "https://www.ncc.gov.sa/ar/Pages/default.aspx",
      }

    ]
  },
  {
    sectorId: 2,
    sectorName: "التعليم",
    sectorIcon: "icon-2.png",
    sectorN: "education",
    licenseTitle: ["إصدار ترخيص مدرسة أهلية بمنهج وطني أو عالمي", "إصدار ترخيص مركز الإشراف والتدريب التربوي الأهلي", "إصدار ترخيص معاهد اللغات", "إصدار ترخيص منشأة تدريبية"],
    licenseDesc: [],
    licenseNum: ["7950", "7951"]
  },
];


let title = document.querySelector(".title");
let subTitle = document.querySelector(".subTitle");
let rightSection = document.querySelector('.right');

function getInfo(id) {
  for (let i = 0; i < database.length; i++) {
    if (database[i].sectorId === parseInt(id)) {
      title.innerHTML += `<img src='img/${database[i].sectorIcon}' alt='image'>`;
      title.innerHTML += `<h2>${name}</h2>`;

      const activities = database[i].touristActivities;
      const contentBuffer = [];

      for (let activity of activities) {
        subTitle.innerHTML += `<h3>${activity.subTitle}</h3>`;
        contentBuffer.push('<section>');
        contentBuffer.push(description(activity.description));
        contentBuffer.push(time(activity.duration));
        contentBuffer.push(money(activity.money, activity.year));
        contentBuffer.push(concerned(activity.concernedParty, activity.concernedPartyLogo, activity.address, activity.phone, activity.website, activity.mail));
        contentBuffer.push(requirements(activity.requirements));
        contentBuffer.push(needs(activity.needs));
        contentBuffer.push(link(activity.linkTitle, activity.link));
        contentBuffer.push('</section>');
      }

      rightSection.innerHTML = contentBuffer.join('');
    }
  }
}
getInfo(1);

function description(desc) {
  return `
    <div class="discription">
    <div class="description-inner parent">
        <div class="descText">
            <img src="img/description.png" alt="desc">
            <h4>وصف الخطوة</h4>
        </div>
        <i class="fas fa-angle-down"></i>
    </div>
    <div class="descInfo toggle">
    <p>${desc}</p>
    </div>
</div>
    `;
}

function time(timeinfo) {
  return `
    <div class="time">
    <div class="time-inner">
        <div class="timeText">
            <img src="img/time.png" alt="time">
            <h4>المدة الزمنية</h4>
        </div>
        <img src="img/arrow.png" alt="arrow">
        <p class="text">${timeinfo}</p>
    </div>
</div>
    `;
}

function money(m, y) {
  return `
    <div class="money">
    <div class="money-inner">
        <div class="moneyText">
            <img src="img/money.png" alt="money">
            <h4>المقابل المالي</h4>
        </div>
        <img src="img/arrow.png" alt="arrow">
        <p class="text"><span>${m}</span> ر.س / <span>${y}</span> سنوات كحد أقصى</p>
    </div>
</div>    
    `;
}

function concerned(a, b, m, p, w, e) {
  return `
    <div class="concerned">
    <div class="concerned-inner parent">
        <div class="concernedText">
            <img src="img/jeha.png" alt="jeha">
            <h4>الجهة المعنية</h4>
        </div>
        <i class="fas fa-angle-down"></i>
        </div>
        <div class="concernedInfo toggle">
            <div class="concernedInfoContent">
                <div class="box">
                    <img src="img/${b}" alt="logo" class="logo">
                    <h4 class="logoTitle">${a}</h4>
                    <p></p>
                </div>
                <div class="box">
                    <div class="locationTitle">
                        <img src="img/location.png" alt="location">
                        <h4>العنوان</h4>
                        </div>
                        <div class="map">${m}</div>

                </div>
                <div class="box">
                    <div class="phone">
                        <img src="img/phone.png" alt="phone">
                        <div class="phoneText">
                            <h4>الهاتف</h4>
                            <a href="${p}" target="_blank">مركز الاتصال الموحد s${p}</a>
                        </div>
                    </div>
                    <div class="website">
                        <img src="img/almanasa-icon.png" alt="web">
                        <div class="websiteText">
                            <h4>المنصة الإلكترونية</h4>
                            <a href="${w}" target="_blank">${w}</a>
                        </div>
                    </div>
                    <div class="mail">
                        <img src="img/bared.png" alt="mail">
                        <div class="webText">
                            <h4>البريد الإلكتروني</h4>
                            <a href="${e}" target="_blank">${e}</a>
                        </div>
                    </div>

                </div>
            </div>
        </div>
</div>   
    `;
}

function requirements(dt) {
  return `
    <div class="requirements">
    <div class="requirements-inner parent">
        <div class="requirementsText">
            <img src="img/terms.png" alt="terms">
            <h4>الاشتراطات</h4>
        </div>
        <i class="fas fa-angle-down"></i>
    </div>
    <div class="requirementsInfo toggle">
    ${dt.map(rq =>`<div class="inner-info">
    <input type="checkbox" value="${rq}">
    <p>${rq}</p></div>`).join("")}
    </div>
</div>`;
}

function needs(dt) {
  return `
    <div class="needs">
    <div class="needs-inner parent">
        <div class="needsText">
            <img src="img/needs.png" alt="needs">
            <h4>المتطلبات</h4>
        </div>
        <i class="fas fa-angle-down"></i>
    </div>
    <div class="needsInfo toggle">
    ${dt.map(nd =>`<div class="inner-info">
    <input type="checkbox" value="${nd}">
    <p>${nd}</p></div>`).join("")}
    </div>
</div>`;
}

function link(lt, li) {
  return `
    <div class="link">
    <div class="link-inner parent">
        <div class="linkText">
            <img src="img/link.png" alt="link">
            <h4>احصل على رخصتك عبر منصة الأعمال</h4>
        </div>
        <i class="fas fa-angle-down"></i>
    </div>
    <div class="linkInfo toggle">
    <a href="${li}" target="_blank">${lt}</a>
    </div>
</div>`;
}

<div class="container">
  <div class="title">

  </div>
  <div class="right">
    <div class="subTitle">

    </div>

  </div>
  <div class="left"></div>
</div>