Untitled

                    $.each(response.tasks, function(id, data) {
                        if (data.task_status == 5) {
                            //$('.p').append('<span> Here</span>');
                            // data.full_names.split(/\s/).reduce((response, word) => response += word.slice(0, 1), '')
                            if (data.passport_photo == null) {
                                var image = "../../images/profile_photos/profile.png";
                            } else {
                                var image = "../../images/profile_photos/" + data.passport_photo;
                            }
                            var now = moment(new Date()); //todays date
                            var end = moment(data.task_deadline); // another date
                            var duration = moment.duration(now.diff(end));
                            var days = Math.floor(duration.asDays());
                            //console.log(days);
                            var title = `\n<div class=\"kanban-item-title\">\n <h6 class=\"title\">${data.task_name}</h6>\n<div class=\"drodown\">\n <a href=\"javascript:void(0)\" class=\"dropdown-toggle\" data-toggle=\"dropdown\">\n<div class=\"user-avatar-group\">\n  <div class=\"user-avatar xs bg-primary\"><img src="${image} "\'></img></div>\n </div>\n </a>\n<div class=\"dropdown-menu dropdown-menu-right\">\n <ul class=\"link-list-opt no-bdr p-3 g-2\">\n  <li>\n <div class=\"user-card\">\n <div class=\"user-avatar sm bg-primary\">\n  <span>${data.full_names.split(/\s/).reduce((response, word) => response += word.slice(0, 1), '')}</span>\n </div>\n <div class=\"user-name\">\n <span class=\"tb-lead\">${data.full_names}</span>\n  </div>\n </div>\n </li>\n  </ul>\n  </div>\n  </div>\n </div>\n     <div class=\"kanban-item-text\">\n <p>${data.task_description}</p>\n  </div>\n  <ul class=\"kanban-item-tags task_tags_${data.task_id}\" id=\"task_tags_${data.task_id}\">\n  </ul>\n  <div class=\"kanban-item-meta\">\n  <ul class=\"kanban-item-meta-list date_due_${data.task_id}\" id=\"due_date_${data.task_id}\">\n <li><em class=\"icon ni ni-notes\"></em><span>${data.project_category}</span></li>\n </ul>\n </div>\n `;
                            if (days > 30) {
                                var date_append = `<li class="text-success"><em class="icon ni ni-calendar"></em><span>${days} D due</span></li>`;
                            } else if (days < 30 && days > 10) {
                                var date_append = `<li class="text-warning"><em class="icon ni ni-calendar"></em><span>${days} D due</span></li>`;
                            } else if (days < 10) {
                                var date_append = `<li class="text-danger"><em class="icon ni ni-calendar"></em><span>${days} D due</span></li>`;
                            } else {
                                var date_append = `<li class="text-default"><em class="icon ni ni-calendar"></em><span>${days} D due</span></li>`;
                            }
                            var date_append_ul = $(`#date_due_${data.task_id}`);
                            date_append_ul.append(`<li class="text-default"><em class="icon ni ni-calendar"></em><span>${days} D due</span></li>`);
                            //$('#date_due_' + data.task_id).append(date_append);
                            var colors = ['primary', 'success', 'info', 'warning', 'danger', 'pink', 'primary-dim', 'success-dim', 'info-dim', 'warning-dim', 'danger-dim', 'pink-dim'];
                            var tags_ul = $(`#task_tags_${data.task_id}`);
                            //var tags = data.task_tags.split(",").length;
                            var tags = data.task_tags.split(",");
                            $.each(tags, function(i, tagging, colors) {
                                var colors = ['primary', 'success', 'info', 'warning', 'danger', 'pink', 'primary-dim', 'success-dim', 'info-dim', 'warning-dim', 'danger-dim', 'pink-dim'];
                                tags_ul.append(`<li><span class="badge badge-${colors[i]}">${tagging[i]} </span></li>\n`);
                            });
                            console.log(tags_ul);
                            //$('.task_tags_' + data.task_id).html(elements);
                            //$(elements).clone().appendTo('.task_tags_' + data.task_id);
                            items1.push({
                                'title': title
                            });
                        }
                        //console.log(sub_dept_name.id);
                        //$('select[name="sub_dept_id"]').append('<option value="' + sub_dept_name.id + '">' + sub_dept_name.sub_dept_name + '</option>');
                    });