JSFiddle - React, Tailwind, and code Playground
HTML
<div class="iconlist" id="filetype" data-input="type">
<a href="javascript:void(0);" data-data="kep" title="Képek" class="btn-icon"><i class="fa fa-file-image-o"></i>aa</a>
<a href="javascript:void(0);" data-data="media" title="Média" class="btn-icon"><i class="fa fa-file-movie-o"></i>bb</a>
<a href="javascript:void(0);" data-data="documentum" title="Dokumentum" class="btn-icon"><i class="fa fa-file-text-o"></i>cc</a>
<a href="javascript:void(0);" data-data="egyeb" title="Egyéb" class="btn-icon"><i class="fa fa-file-word-o"></i>dd</a>
</div>
<br><br>
<div class="iconlist" id="filetype2" data-input="type">
<a href="javascript:void(0);" data-data="kep" title="Képek" class="btn-icon"><i class="fa fa-file-image-o"></i>vv</a>
<a href="javascript:void(0);" data-data="media" title="Média" class="btn-icon"><i class="fa fa-file-movie-o"></i>cd</a>
<a href="javascript:void(0);" data-data="documentum" title="Dokumentum" class="btn-icon"><i class="fa fa-file-text-o"></i>qwq</a>
<a href="javascript:void(0);" data-data="egyeb" title="Egyéb" class="btn-icon"><i class="fa fa-file-word-o"></i>trtr</a>
</div>
CSS
.active { border:1px solid red }
JavaScript
$(document).ready(function(){
var mcChoser = function(args) {
for (arg in args) { this[arg] = args[arg]; }
this.Start = function() {
console.log('start', this.ID);
self = this;
$('#'+ this.ID +' a').click(function(e){ self.Chosed(e); });
}
this.Chosed = function(e, ID) {
console.log( this );
if( this.multiple == true ) { $(e.currentTarget).toggleClass('active'); }
else {
var vane = $(e.currentTarget).hasClass('active');
$('#'+this.ID+' a.active').removeClass('active');
if( vane == false ) { $(e.currentTarget).addClass('active'); }
}
this.setValues();
}
this.setValues = function() {
var List = $('#'+ this.ID +' a.active');
var HTML = '';
$('#'+this.ID + ' [name="'+ this.inputname +'"]').remove();
if( List.length > 0 ) { for(i=0; i<List.length; i++) { HTML += '<input type="hidden" name="'+ this.inputname +'" value="'+ $(List[i]).data('data') +'">'; } }
$('#'+ this.ID).append(HTML);
}
this.Start();
}
filetype = new mcChoser({ID:"filetype"});
filetype2 = new mcChoser({ID:"filetype2"});
});