JSFiddle - React, Tailwind, and code Playground

by Neeraj Yadav

HTML

productAdmin.jsp..................
<div class="form-row-outer">
  <div class="form-head-left">
    Non-Primary Bucket Name
  </div>
  <ul id="nonPrimaryBktTags"></ul>
  <form:hidden path="navigationBucket.secondaryBucket" class="input-text"
               id="nonPrimaryBucketNames" />

</div>

JavaScript

loadProduct.js...............
/*Product Admin - Edit Attributes*/
			var multipleBktData = data.bucketDTOs;
			if(multipleBktData.length){
				for(var i = 0; i < multipleBktData.length; i++){
					$('#nonPrimaryBktTags').append('<li>' + multipleBktData[i].bucketDisplayName +'</li>');
				}

				$('#nonPrimaryBktTags').tagit({
					triggerKeys : ['enter', 'comma'],
					singleField: true,
					tagsChanged: function (tagValue, action, tag) {
						if (action == "added") {
							$('#nonPrimaryBucketNames').append('<option selected="selected" value="' + tagValue + '">' + tagValue + '</option>');
						}
						else if (action == "popped") {
							$('#nonPrimaryBucketNames option:eq(' + tag.index + ')').remove();
						}
					}
				});
				$('.tagit-new').show();
			}