Adding HTML element from friend data

The function creates a HTML element for each data of friend and add the element to the current friend list HTML element.

Named Function

            function (eachFriend) {
                const id = eachFriend.id;
                const lname = eachFriend.get('lname');
                const fname = eachFriend.get('fname');
                const email = eachFriend.get('email');
                const facebook = eachFriend.get('facebook');
                const twitter = eachFriend.get('twitter');
                const instagram = eachFriend.get('instagram');
                const linkedin = eachFriend.get('linkedin');
        
                const theListItem = document.createElement("li");
                theListItem.setAttribute("id", `r-${id}`);
                theListItem.innerHTML = `
                    <div class="name">${fname} ${lname}</div>
                    <div class="email">
                        <i class="fas fa-envelope-square"></i>${email}
                    <div>
                    <div class="social">
                        <a href="${facebook}"><i class="fab fa-facebook-square"></i></a>
                        <a href="${twitter}"><i class="fab fa-twitter-square"></i></a>
                        <a href="${instagram}"><i class="fab fa-instagram-square"></i></a>
                        <a href="${linkedin}"><i class="fab fa-linkedin-square"></i></a>
                    <div>
                    <i class="fas fa-edit" id="e-${id}"></i>
                    <i class="fas fa-times-circle" id="d-${id}"></i>
                `;
                friendList.append(theListItem);
            }

Function Expression

            const createFriend = function (eachFriend) {
                const id = eachFriend.id;
                const lname = eachFriend.get('lname');
                const fname = eachFriend.get('fname');
                const email = eachFriend.get('email');
                const facebook = eachFriend.get('facebook');
                const twitter = eachFriend.get('twitter');
                const instagram = eachFriend.get('instagram');
                const linkedin = eachFriend.get('linkedin');
        
                const theListItem = document.createElement("li");
                theListItem.setAttribute("id", `r-${id}`);
                theListItem.innerHTML = `
                    <div class="name">${fname} ${lname}</div>
                    <div class="email">
                        <i class="fas fa-envelope-square"></i>${email}
                    <div>
                    <div class="social">
                        <a href="${facebook}"><i class="fab fa-facebook-square"></i></a>
                        <a href="${twitter}"><i class="fab fa-twitter-square"></i></a>
                        <a href="${instagram}"><i class="fab fa-instagram-square"></i></a>
                        <a href="${linkedin}"><i class="fab fa-linkedin-square"></i></a>
                    <div>
                    <i class="fas fa-edit" id="e-${id}"></i>
                    <i class="fas fa-times-circle" id="d-${id}"></i>
                `;
                friendList.append(theListItem);
            }

Arrow Function

            const createFriend = (eachFriend) => {
                const id = eachFriend.id;
                const lname = eachFriend.get('lname');
                const fname = eachFriend.get('fname');
                const email = eachFriend.get('email');
                const facebook = eachFriend.get('facebook');
                const twitter = eachFriend.get('twitter');
                const instagram = eachFriend.get('instagram');
                const linkedin = eachFriend.get('linkedin');
        
                const theListItem = document.createElement("li");
                theListItem.setAttribute("id", `r-${id}`);
                theListItem.innerHTML = `
                    <div class="name">${fname} ${lname}</div>
                    <div class="email">
                        <i class="fas fa-envelope-square"></i>${email}
                    <div>
                    <div class="social">
                        <a href="${facebook}"><i class="fab fa-facebook-square"></i></a>
                        <a href="${twitter}"><i class="fab fa-twitter-square"></i></a>
                        <a href="${instagram}"><i class="fab fa-instagram-square"></i></a>
                        <a href="${linkedin}"><i class="fab fa-linkedin-square"></i></a>
                    <div>
                    <i class="fas fa-edit" id="e-${id}"></i>
                    <i class="fas fa-times-circle" id="d-${id}"></i>
                `;
                friendList.append(theListItem);
            }