How to create taskboard using jquery

// Create a new row for the dynamic columns
var dynamicColumnsRow = $('<div class="row"></div>');

// Define an array of headings for each iteration
var dynamicHeadings = ['Todo', 'Onhold', 'Inprogress', 'Completed'];

// Iterate through the dynamic headings
for (var i = 0; i < dynamicHeadings.length; i++) {
    // Create a new column for each dynamic heading
    var dynamicColumn = $('<div class="col-md-3"></div>');

    // Add placeholder content to the dynamic column
    dynamicColumn.append('<div class="card" style="border: 1px solid black; margin: 10px;">');
    dynamicColumn.find('.card').append('<div class="card-header">' + dynamicHeadings[i] + ' Tasks</div>');
    dynamicColumn.find('.card').append('<div class="card-body">Placeholder Content for ' + dynamicHeadings[i] + '</div>');
    dynamicColumn.find('.card').append('</div>');

    // Append the dynamic column to the row
    dynamicColumnsRow.append(dynamicColumn);
}

// Append the row with dynamic columns to the result container
resultContainer.append(dynamicColumnsRow);

  if (adminIds.length > 0) {
                    var startIndex = (currentPage - 1) * itemsPerPage;
        var endIndex = startIndex + itemsPerPage;
        var paginatedData = adminIds.slice(startIndex, endIndex);
        var totalPages = Math.ceil(adminIds.length / itemsPerPage);
                    addPaginationControls(totalPages);
                    var adminId = 1; // Initialize adminId outside the loop
                    var statusCategories = ['Todo', 'Onhold', 'Inprogress', 'Completed'];
                    var statusCategory = 'Todo'; // Set the desired status category

var additionalColumnsRow = $('<div class="row"></div>');

var dynamicColumnsRow = $('<div class="row"></div>');

// Define an array of headings for each iteration
var dynamicHeadings = ['Todo', 'Onhold', 'Inprogress', 'Completed'];

// Iterate through the dynamic headings
for (var i = 0; i < dynamicHeadings.length; i++) {
    // Create a new column for each dynamic heading
    var dynamicColumn = $('<div class="col-md-3"></div>');

    // Add placeholder content to the dynamic column
    dynamicColumn.append('<div class="card" style="border: 1px solid black; margin: 10px;">');
    dynamicColumn.find('.card').append('<div class="card-header">' + dynamicHeadings[i] + ' Tasks</div>');
    dynamicColumn.find('.card').append('<div class="card-body">Placeholder Content for ' + dynamicHeadings[i] + '</div>');
    dynamicColumn.find('.card').append('</div>');

    // Append the dynamic column to the row
    dynamicColumnsRow.append(dynamicColumn);
}

// Append the row with dynamic columns to the result container
resultContainer.append(dynamicColumnsRow);


                } 

for (var i = 0; i < dynamicHeadings.length; i++) {
    // Create a new column for each dynamic heading
    var dynamicColumn = $('<div class="col-md-3"></div>');

    // Add placeholder content to the dynamic column
    dynamicColumn.append('<div class="card" style="border: 1px solid black; margin: 10px;">');
    dynamicColumn.find('.card').append('<div class="card-header">' + dynamicHeadings[i] + ' Tasks</div>');
    dynamicColumn.find('.card').append('<div class="card-body">Placeholder Content for ' + dynamicHeadings[i] + '</div>');

    // Check if the task is "Todo" and include the additional code
    if (dynamicHeadings[i] === 'Todo') {
        $.each(data, function(index, records) {
            // Create a new cardContent for each adminId
            var cardContent = $('<div class="card" style="border: 1px solid black; margin: 10px;">');

            // Append the card header with the current adminId

            $.each(records, function(index, record) {
                var id = record.id;
        var user_name = record.user_name;
        var order_pay_date = record.order_pay_date; 
        var pay_amount = record.pay_amount; 
        var task_title = record.task_title; 
        var status = record.status; 
        var lockdate = record.tasklockdate; 
        var approvedatedate = record.statusdate; 
        var date3 = record.status; 
        var date4= record.status; 
        var date5 = record.status;
        var pub_status = record.publisher_status;    
        var pub_statusdata = record.publisher_date ? record.publisher_date : {};
        var pub_status_key = pub_statusdata ? Object.keys(pub_statusdata)[0] : null;       
        var pub_keyvalue_length = pub_statusdata ? Object.entries(pub_statusdata).length : null;
       // var keysLength = pub_status ? Object.keys(pub_status).length : null;
        console.log("pub_statusdataddd");
        console.log(pub_statusdata);
        console.log(pub_status_key);
          console.log(pub_keyvalue_length);
          // Extracting the key name dynamically
          var keys = Object.keys(pub_statusdata);

// Checking if there are any keys
if (keys.length > 0) {
    var keyName = keys[0];
    // Logging the key name
    console.log(keyName);
} else {
    console.log("Object is empty; no keys found.");
}
                var userCard = $('<div class="card">');

                // Add card header with user information
                userCard.append('<div class="card-header"><b>Publisher:</b> ' + user_name + ' Task</div>');

                // Create a new cardBody with two columns (col-md-10 and col-md-2)

                cardContent.append(userCard);
            });

            // Increment adminId for the next group
            adminId++;

            // Append the complete cardContent to the result container
            dynamicColumn.find('.card-body').append(cardContent);
        });
    }

    dynamicColumn.find('.card').append('</div>');

    // Append the dynamic column to the row
    dynamicColumnsRow.append(dynamicColumn);
}

// Append the row with dynamic columns to the result container
resultContainer.append(dynamicColumnsRow);