derpixler/awsmAdditionalStyle.js

## awsmAdditionalStyle.js
var awsmAdditionalStyle = function (additionals = []) {
    this.listElem    = document.querySelector('.awsm-preset-list');
    this.additionals = additionals ? additionals : [];

    if(this.listElem && this.additionals) {
        this.input = this.listElem.querySelector('input');
        this.label = this.listElem.querySelector('label');

        var cloneInput = function (additionals) {
            if (!this.input) {
                return null;
            }

            var clonedInput = this.input.cloneNode();
            additionals.class ? clonedInput.classList.add(additionals.class) : null;
            additionals.style ? clonedInput.dataset.style = additionals.style : null;
            additionals.id ? clonedInput.setAttribute('id', 'rad-' + additionals.id) : null;
            additionals.type ? clonedInput.setAttribute('value', 'rad-' + additionals.type) : null;

            return clonedInput;
        }

        var cloneLable = function (additionals) {
            if (!this.input) {
                return null;
            }

            var clonedLable = this.label.cloneNode(true);
            var img = clonedLable.querySelector('img');
            var span = clonedLable.querySelector('span');

            additionals.class ? clonedLable.classList.add(additionals.class) : null;
            additionals.style ? clonedLable.dataset.style = additionals.style : null;
            additionals.id ? clonedLable.setAttribute('for', 'rad-' + additionals.id) : null;
            additionals.img ? img.src = additionals.img : null;

            additionals.type ? img.src = additionals.img : null;
            additionals.id ? span.dataset.type = additionals.type : null;
            additionals.name ? span.innerText = additionals.name : null;

            clonedLable.appendChild(img);
            clonedLable.appendChild(span);

            return clonedLable;
        }

        for (var i = 0; i < this.additionals.length; i++) {
            var clonedInput = cloneInput(this.additionals[i]);
            var clonedLable = cloneLable(this.additionals[i]);

            clonedInput ? this.listElem.appendChild(clonedInput) : null;
            clonedLable ? this.listElem.appendChild(clonedLable) : null;
        }
    }
};

document.addEventListener("DOMContentLoaded", function(event) {
    var additionals = [{
            class:  '',
            id:     'my-template',
            style:  '5',
            column: '56',
            name:   'My Template',
            type:   'my-template',
            img:    'www.google.de'
        },
        {
            class:  '',
            id:     'foo',
            style:  '',
            column: '',
            name:   '',
            type:   '',
            img:    ''
        },
        {
            class:  '',
            id:     'another-template',
            style:  '6',
            column: '99',
            name:   'Anothoer Template',
            type:   'another-template',
            img:    'www.google.de'

        }];

    awsmAdditionalStyle(additionals);
});

## index.html
<!doctype html>
<html>
    <head>
        <title>Getting Started</title>
        <script src="awsmAdditionalStyle.js"></script>
    </head>
    <body>
        <div class="awsm-preset-list awsm-clearfix">
            <input class="awsm-radio-hidden" id="rad-table" type="radio" data-style="3" data-column="0" name="team-style" value="table">
            <label for="rad-table"><img src="http://blunk-gmbh.wp/wp-content/plugins/awsm-team-pro//images/table.jpg">
                <span data-type="table">Table</span>
            </label>
        </div>
    </body>
</html>
	var awsmAdditionalStyle = function (additionals = []) {
	this.listElem = document.querySelector('.awsm-preset-list');
	this.additionals = additionals ? additionals : [];

	if(this.listElem && this.additionals) {
	this.input = this.listElem.querySelector('input');
	this.label = this.listElem.querySelector('label');

	var cloneInput = function (additionals) {
	if (!this.input) {
	return null;
	}

	var clonedInput = this.input.cloneNode();
	additionals.class ? clonedInput.classList.add(additionals.class) : null;
	additionals.style ? clonedInput.dataset.style = additionals.style : null;
	additionals.id ? clonedInput.setAttribute('id', 'rad-' + additionals.id) : null;
	additionals.type ? clonedInput.setAttribute('value', 'rad-' + additionals.type) : null;

	return clonedInput;
	}

	var cloneLable = function (additionals) {
	if (!this.input) {
	return null;
	}

	var clonedLable = this.label.cloneNode(true);
	var img = clonedLable.querySelector('img');
	var span = clonedLable.querySelector('span');

	additionals.class ? clonedLable.classList.add(additionals.class) : null;
	additionals.style ? clonedLable.dataset.style = additionals.style : null;
	additionals.id ? clonedLable.setAttribute('for', 'rad-' + additionals.id) : null;
	additionals.img ? img.src = additionals.img : null;

	additionals.type ? img.src = additionals.img : null;
	additionals.id ? span.dataset.type = additionals.type : null;
	additionals.name ? span.innerText = additionals.name : null;

	clonedLable.appendChild(img);
	clonedLable.appendChild(span);

	return clonedLable;
	}

	for (var i = 0; i < this.additionals.length; i++) {
	var clonedInput = cloneInput(this.additionals[i]);
	var clonedLable = cloneLable(this.additionals[i]);

	clonedInput ? this.listElem.appendChild(clonedInput) : null;
	clonedLable ? this.listElem.appendChild(clonedLable) : null;
	}
	}
	};

	document.addEventListener("DOMContentLoaded", function(event) {
	var additionals = [{
	class: '',
	id: 'my-template',
	style: '5',
	column: '56',
	name: 'My Template',
	type: 'my-template',
	img: 'www.google.de'
	},
	{
	class: '',
	id: 'foo',
	style: '',
	column: '',
	name: '',
	type: '',
	img: ''
	},
	{
	class: '',
	id: 'another-template',
	style: '6',
	column: '99',
	name: 'Anothoer Template',
	type: 'another-template',
	img: 'www.google.de'

	}];

	awsmAdditionalStyle(additionals);
	});
	<!doctype html>
	<html>
	<head>
	<title>Getting Started</title>
	<script src="awsmAdditionalStyle.js"></script>
	</head>
	<body>
	<div class="awsm-preset-list awsm-clearfix">
	<input class="awsm-radio-hidden" id="rad-table" type="radio" data-style="3" data-column="0" name="team-style" value="table">
	<label for="rad-table"><img src="http://blunk-gmbh.wp/wp-content/plugins/awsm-team-pro//images/table.jpg">
	<span data-type="table">Table</span>
	</label>
	</div>
	</body>
	</html>