JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<select multiple name="courses" id="courses">
  <option value="1" data-type-icon="https://cdn4.iconfinder.com/data/icons/iconfinder_pixel/education_course_training.png" data-course-icon="https://cdn4.iconfinder.com/data/icons/iconfinder_pixel/clock_time.png" data-label="Course Name Here" data-status-icon="https://cdn4.iconfinder.com/data/icons/iconfinder_pixel/diary_book.png" selected="selected">Course #1 Name Here</option> 
  <option value="1" data-type-icon="https://cdn4.iconfinder.com/data/icons/iconfinder_pixel/education_course_training.png" data-course-icon="https://cdn4.iconfinder.com/data/icons/iconfinder_pixel/clock_time.png" data-label="Course Name Here" data-status-icon="https://cdn4.iconfinder.com/data/icons/iconfinder_pixel/diary_book.png">Course #2 Name Here</option>
  <option value="1" data-type-icon="https://cdn4.iconfinder.com/data/icons/iconfinder_pixel/education_course_training.png" data-course-icon="https://cdn4.iconfinder.com/data/icons/iconfinder_pixel/education_teacher.png" data-label="Course Name Here" data-status-icon="https://cdn4.iconfinder.com/data/icons/iconfinder_pixel/diary_book.png" selected="selected">Course #3 Name Here</option>
</select>

JavaScript

var multiple_selections = {

	original: $('select'),
  replacement: null,
  
  attributes: Array('data-type-icon','data-course-icon','data-label','data-status-icon'),
  
  replace: function(){
  
  	var cached_this = this;
  
  	cached_this.replacement = $('<table class="multiple-selections"></table>');
  	
    
  	cached_this.original.find('option').each(function(){
    
    	var rows_html = '';
 			rows_html += '<tr></tr>';
      
      for(var i=0;i<cached_this.attributes.length;i++){
      	
        if(cached_this.attributes[i].substr(-4) == 'icon'){
        
        	rows_html += '<td><img src="' + $(this).attr(cached_this.attributes[i]) + '" /></td>';
        
        } else {
        
        	rows_html += '<td>' + $(this).attr(cached_this.attributes[i]) + '</td>';
        
        }
      	
      }
      
      // check if selected and check if it is
      
      if($(this).prop('selected')){
      
      	var checked = ' checked="checked"';
      
      } else {
      
      	var checked = '';
      
      }
      
      rows_html += '<td><input type="checkbox" value="' + $(this).val() + '"' + checked + ' /></td>';
      
      cached_this.replacement.append(rows_html);
    
    });
    
    $('body').append(cached_this.replacement);
  
  }

}

multiple_selections.replace();