sorter

    <div class="row">
        <div class="col-12 mb-3">
            <h3>My ID</h3>
        </div>
        <!-- Dynamically generated columns -->
    </div>
</div>

<script>
    document.getElementById('sort-ids').addEventListener('click', function() {
        const appIds = document.getElementById('app-ids').value.trim().split('\n');
        const columns = {};
        const container = document.querySelector('.row');

        appIds.forEach(id => {
            const firstChar = id.charAt(0).toLowerCase();
            if (!columns[firstChar]) {
                columns[firstChar] = [];
            }
            columns[firstChar].push(id);
        });

        container.innerHTML = '<div class="col-12 mb-3"><h3>My ID</h3></div>'; // Reset columns

        for (const [key, ids] of Object.entries(columns)) {
            const colDiv = document.createElement('div');
            colDiv.className = 'col-md-3 column';
            colDiv.innerHTML = `
                <h4>${key}</h4>
                <textarea class="form-control" rows="10" readonly>${ids.join('\n')}</textarea>
                <button class="btn btn-secondary btn-save" data-key="${key}">Save</button>
                <button class="btn btn-success btn-claim" data-key="${key}">Claim</button>
            `;
            container.appendChild(colDiv);
        }

        document.getElementById('app-ids').value = ''; // Clear input area

        document.querySelectorAll('.btn-save').forEach(button => {
            button.addEventListener('click', function() {
                const key = this.getAttribute('data-key');
                const content = this.previousElementSibling.value;
                const blob = new Blob([content], {type: 'text/plain'});
                const url = URL.createObjectURL(blob);
                const a = document.createElement('a');
                a.href = url;
                a.download = `${key}-AppIDs.txt`;
                a.click();
                URL.revokeObjectURL(url);
                this.style.display = 'none';
                this.nextElementSibling.style.display = 'block';
            });
        });

        document.querySelectorAll('.btn-claim').forEach(button => {
            button.addEventListener('click', function() {
                this.parentElement.querySelector('textarea').value = '';
                this.style.display = 'none';
            });
        });
    });
</script>