This script:

1. Attaches a click handler to .order-kp-list elements
2. Gets the ID from the radio input's value
3. Sends an AJAX POST request to a specified endpoint (you'll need to replace '/api/getOrderDetails' with your actual endpoint)
4. Creates and shows a Bootstrap modal with the response data
5. When the modal closes, highlights the parent TD with a light gray background and unchecks the radio input
6. Cleans up by removing the modal from the DOM

To use this:

1. Make sure you have jQuery and Bootstrap included in your project
2. Replace '/api/getOrderDetails' with your actual API endpoint
3. Adjust the modal content structure based on your API response format
4. Include this script after your DataTable initialization
5. Ensure your HTML includes the Bootstrap modal CSS/JS dependencies

The modal will display when clicking anywhere on the .order-kp-list div, and the TD will be highlighted with a light gray background when the modal is closed.

Explanation

1. Storing Highlighted Orders:
   • An array highlightedOrders stores the value attributes (order IDs) of the radio inputs whose TDs were highlighted.
   • The array is persisted in localStorage to survive page refreshes (optional; remove if not needed).
   • When a modal is closed, the order ID is added to highlightedOrders if not already present.
2. Reapplying Highlights:
   • The applyHighlights function iterates through highlightedOrders and sets the background color for the corresponding TDs using the input's value attribute.
   • This function is called:
     • Initially when the page loads.
     • After every table reload (via table.ajax.reload callback).
     • After every table draw (via draw event listener).
3. Integration with DataTable Reload:
   • The setInterval reload uses table.ajax.reload with a callback to call applyHighlights after the reload completes.
   • The false parameter ensures paging is preserved.
   • The draw event listener ensures highlights are reapplied if the table is redrawn for other reasons (e.g., sorting, filtering).
4. Event Delegation:
   • The click handler for .order-kp-list is attached to the document level to handle dynamically loaded rows after reloads.
   • If your DataTable loads new rows with different IDs, the handler will still work.

Setup Instructions

1. Replace Table ID:
   • Update $('#yourTableId') with the actual ID of your DataTable (e.g., $('#myTable')).
2. API Endpoint:
   • Replace '/api/getOrderDetails' with your actual endpoint for fetching order details.
3. Dependencies:
   • Ensure jQuery, DataTables, and Bootstrap are included.
   • The script assumes the same HTML structure as provided (radio inputs with value attributes in .order-kp-list).
4. Optional: Remove localStorage:
   • If you don't want highlights to persist across page refreshes, remove the localStorage lines and just use the highlightedOrders array.
5. CSS:
   • The background color is set to #f0f0f0 (light gray). Adjust as needed.

Notes

• If the table data changes (e.g., order IDs are removed), you may need to clean up highlightedOrders to remove obsolete IDs. You could add logic in applyHighlights to verify if the order ID still exists in the table.
• If performance is a concern with many highlighted rows, consider using a CSS class instead of inline styles:

This solution ensures that TD backgrounds remain highlighted after table reloads while maintaining the modal and radio input functionality from your original setup.