JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<div id="selectiona"></div>

JavaScript

let data = {
    bank: {
        0: {
            id: 1,
            banks: 'b1',
            code: 'active'
        },
        1: {
            id: 2,
            banks: 'b2',
            code: 'parking'
        },
        2: {
            id: 3,
            banks: 'b3',
            code: 'safe'
        },
        3: {
            id: 4,
            banks: 'b4',
            code: 'active'
        },
        4: {
            id: 5,
            banks: 'b5',
            code: 'safe'
        },
        5: {
            id: 6,
            banks: 'b6',
            code: 'parking'
        }
    }
};

// reformat data.
let reformatted = {};
$.each(data.bank, function(i, item) {
	if (!reformatted[item.code]) {
    	reformatted[item.code] = [];
    }
    reformatted[item.code].push({
        value: item.id,
        text: item.banks,
    });
});

$('#selectiona').append($('<select name="bankselect" class="bankselect"></select>'));

let bankSelectbox = document.querySelector('.bankselect');
let renderedHTMLString = '';
// loop group names
for (const [groupname, items] of Object.entries(reformatted)) {
	renderedHTMLString += '<optgroup label="' + groupname + '">';
    // loop items for select > option
    for (const eachItem of items) {
		renderedHTMLString += '<option value="' + eachItem.value + '">' + eachItem.text + '</option>';
    }
    renderedHTMLString += '</optgroup>';
}
bankSelectbox.insertAdjacentHTML('beforeend', renderedHTMLString);