JSFiddle - React, Tailwind, and code Playground

by bluey

HTML

<script src="http://www.inimitable.co/home/assets/js/chosen/chosen.jquery.min.js"></script>
<link rel="stylesheet" href="http://www.inimitable.co/home/assets/js/chosen/chosen.css">
<select id='new_vid_form_tags_field' data-newvid_div='tags' style="" multiple class="form-control vid_form chosen-select-no-results chosen-select" data-placeholder='Select Tags'>
				<option value="" class='option_select'></option>
				<div>
				
				<option class='option_select'>American Black Bear</option>
				<option class='option_select'>Asiatic Black Bear</option> 
				<option class='option_select'>Brown Bear</option>
				<option class='option_select'>Giant Panda</option>
				<option class='option_select'>Sloth Bear</option>
				<option class='option_select'n>Sun Bear</option>
				<option class='option_select'>Polar Bear</option>
				<option class='option_select'>Spectacled Bear</option>
				
				</div>
			</select>

JavaScript

$("#new_vid_form_tags_field").chosen().change(function (event) {
				alert($(event.target).val());
			var field = $(this).attr('data-newvid_div');
			var parentID = $(this).parent().attr('id');
			//alert('d');
			if (field == 'tags') {
				// var tags = $('#'+parentID+'_field').val();
				var tags = $(event.target).val();

				var tagsLength = tags.length;
			
				if (tagsLength > 0) {
					clear_warning(parentID);
					clear_asterisk(parentID);
					set_tick(parentID);
					
					tags_state = 1;
				}
				if (tagsLength == 0) {
					clear_warning(parentID);
					clear_tick(parentID);
					set_asterisk(parentID);
					
					tags_state = 0;
				}
				if (tagsLength > 30) {
					clear_asterisk(parentID);
					clear_tick(parentID);
					set_warning(parentID);
					
					tags_state = 0;
				}
				
			}
			//$("#new_vid_form_tags_field").val('').trigger("change"); 
				//alert($(event.target).val());
			});