createRadioElement - даже если это пользовательская функция, то непонятно что означает Justin_check.setAttribute и т.п., что одна радио кнопка, тогда какой в этом смысл? А если группа, то она должна иметь имя, и если нужны id, то они не могут быть одинаковы, как и значения кнопок.
Список 'Тип доставки' тоже не понятен. Если выбор его обязателен, тогда зачем в нем опция с пустым значением? Получается, что должен быть флажок, который можно отметить или нет.
Если оперировать атрибутами и свойствами, то удобнее описать параметры полей формы, а также их родителей (div) в объекте, который обходя в цикле позволит построить форму. Объект это дерево вложений и если вложения не определены жестко, то обойти его можно рекурсивно. В примере же жестко определено: в родителе "form-group" (в примере group) помещаются элементы "col-12 mb-2" (в примере wrap, описаны массивом свойства child), в которые размещаются элементы формы, то есть рекурсия не нужна.
Свойство elem всегда массив, даже если описывается одно поле формы, это чтобы "автомат" работал по единому жесткому алгоритму, так как для таких элементов как флажок и радио кнопка желательна метка упрощающая их выбор.
На jQuery описание вывода простое (на нативном впрочем не сложнее, строк немного больше будет):
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var field = [
{group: '<div>', attr: {'class': 'group'}, child: [
{wrap: '<div>', attr: {'class': 'wrap'}, elem: [
{node: '<input>', attr: {type: 'text', name: 'a', 'class': "form-control user-surname", placeholder: "Фамилия", required: ''}}
]}
]},
{group: '<div>', attr: {'class': 'group'}, child: [
{wrap: '<div>', attr: {'class': 'wrap'}, elem: [
{node: '<input>', attr: {type: 'text', name: 'b', 'class': "form-control city", placeholder: "Город", required: ''}}
]},
{wrap: '<div>', attr: {'class': 'wrap'}, elem: [
{node: '<input>', attr: {type: 'text', name: 'c', 'class': "form-control branch_number", placeholder: "Номер отделения", pattern: '\\d{6}', required: ''}}
]}
]},
{group: '<div>', attr: {'class': 'group'}, child: [
{wrap: '<div>', attr: {'class': 'wrap'}, elem: [
{node: '<input>', attr: {type: 'checkbox', name: 'd', 'class': "form-control", id: 'a'}},
{node: '<label>', attr: {'class': "form-control", 'for': 'a', text: 'доставка до отделения'}}
]}
]},
{group: '<div>', attr: {'class': 'group'}, child: [
{wrap: '<div>', attr: {'class': 'wrap'}, elem: [
{node: '<select>', attr: {name: 'e', 'class': "form-control", required: ''}, options: [
{value: '', text: 'Тип оплаты'},
{value: 'Наложенный платёж', text: 'Наложенный платёж'},
{value: 'Оплата на карту', text: 'Оплата на карту'}
]}
]}
]},
{group: '<div>', attr: {'class': 'group'}, child: [
{wrap: '<div>', attr: {'class': 'wrap'}, elem: [
{node: '<input>', attr: {type: 'submit', 'class': "form-control", value: 'Отправить'}}
]}
]}
],
f = $('#f').submit(function(e) {
e.preventDefault();
alert($(this).serialize()) //это поля формы для отправления
});
$.each(field, function() {
var a = $(this.group, this.attr).appendTo(f);
$.each(this.child, function() {
var b = $(this.wrap, this.attr).appendTo(a);
$.each(this.elem, function() {
var c = $(this.node, this.attr).appendTo(b);
if(this.options) {
$.each(this.options, function() {
$('<option>', this).appendTo(c);
})
}
})
})
});
});
</script>
</head>
<body>
<form id="f"></form>
</body>
</html>