लूप के अंदर गतिशील रूप से बनाए गए HTML तत्वों को पॉप्युलेट करें

मैंने लूप के अंदर एचटीएमएल तत्वों का एक ब्लॉक बनाया है जो प्रत्येक पते के बीच एक प्रारंभिक पता, गंतव्य पता, दूरी और समय सूचीबद्ध करता है। मेरे पास addressनाम के पतों की एक सरणी है जिसे मैं html में अपने startaddress तत्व पर धकेलने का प्रयास कर रहा हूं। लूप के अंदर, startaddress के लिए आईडी को एक टेम्पलेट शाब्दिक ${[i]} के साथ गतिशील रूप से बढ़ाया जाता है ताकि address सरणी की लंबाई के आधार पर नए तत्व बनाए जा सकें। लूप के अंदर, मैंने वैरिएबल को टेम्प्लेट स्ट्रिंग्स के रूप में बनाया, मुझे लगता है कि यह सही शब्दावली है, लेकिन वे कंसोल में वेरिएबल के रूप में पहचाने नहीं जाते हैं। अगर मैं उन्हें कंसोल.लॉग करता हूं, तो मुझे एक त्रुटि संदेश मिलता है

startInput परिभाषित नहीं है

destInput परिभाषित नहीं है

जाहिर है कि मैं जो कर रहा हूं वह गलत है, लेकिन मुझे यकीन नहीं है कि startaddress को गतिशील रूप से कैसे पॉप्युलेट किया जाए। मैं अंततः लूप के अंदर क्या करने की उम्मीद कर रहा हूं वह है startInput1, startinput2, आदि बनाना, साथ ही destInput1, destInput2, आदि के लिए उसी अनुक्रम के साथ। मैं लूप के अंदर इन गतिशील चर बनाने के लिए कैसे जा सकता हूं। अग्रिम धन्यवाद और यहाँ मेरा कोड है:

                    let container = document.querySelector(".container-lg")

                    for (let i = 0; i <= addresses.length; i++) {
                        let div = document.createElement("div");
                        div.classList.add("card", "card-body", "mb-3");
                        console.log(addresses[i]);
                        div.innerHTML = `<div class="mx-auto" style="width: 500px; margin-top:50px;">

                            <div class="input-group">
                                <div class="input-group-prepend">
                                <span class="input-group-text">Starting Address</span>
                                </div>
                                <input class="form-control" type="text" placeholder="Start Address" id="startaddress${i}">
                            </div>
                            <br />
                            <div class="input-group">
                                <div class="input-group-prepend">
                                <span class="input-group-text">Destination Address</span>
                                </div>
                                <input class="form-control" type="text" placeholder="Destination Address" id="destAddress${i}">
                            </div>
                            <hr />
                            <div class="card" style="width: 18rem;">
                                <div class="card-body">
                                <h5 class="card-title">Distance <span id="distance"></span></h5>
                                </div>
                            </div>
                            <br />
                            <div class="card" style="width: 18rem;">
                                <div class="card-body">
                                <h5 class="card-title">Trip Time <span id="time1"></span></h5>
                                </div>
                            </div>`;
                        container.appendChild(div);
                        let startInput = document.querySelector(`#startaddress${[i]}`);
                        startInput.value = addresses[i];
                    }