JSFiddle - React, Tailwind, and code Playground

HTML

productAdmin.jsp

/*accordion for multiple buckets filters*/
					var allPanels = $('.accordion > dd').hide();

					$('.accordion > dt > a').live('click',function () {
						allPanels.slideUp();
						$(this).parent().next().slideToggle("slow");
						return false;
					});
					$('.accordion dt').live('focus',function(){
						$('.accordion dt').removeClass("active").find(".chevron").removeClass("arrow-down");
						$(this).addClass("active").find(".chevron").addClass("arrow-down");
					});



<li id="tabcontent-11">
									<div class="head-lable">
										<h4 class="head-lable-text">Assign Filters</h4>
									</div>
									<div class="dealadmin bucket-filter-container">
										<!-- accordion container starts -->
										<!--<dl class="accordion">
											<dt><a href="javascript:void(0)"><span>Bucket Display Name:</span><span>Bucket ID: </span></a></dt>
											<dd>
												<div class="form-row-outer">
													<div id="filters"></div>
												</div>
											</dd>
										</dl>-->
										<!-- accordion container ends -->
									</div>
									<div id="subCatFilterchange"></div>
								</li>

CSS

/*accordion css*/
a{
  text-decoration: none;
}
.accordion dt, .accordion dd {
  padding: 10px;
  border: 1px solid black;
  border-bottom: 0;
}
.accordion dt:last-of-type, .accordion dd:last-of-type {
  border-bottom: 1px solid black;
}
.accordion dt a, .accordion dd a {
  display: block;
  color: black;
  font-weight: bold;
}
.accordion dd {
  border-top: 0;
  font-size: 12px;
  background: #FFF;
}
.accordion dd:last-of-type {
  border-top: 1px solid white;
  position: relative;
  top: -1px;
}
.active{
  background: #029ecb;	
}
.chevron{
  float: right;
  margin-top: -11px;
  width: 0; 
  height: 0; 
}
.arrow-right {
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid black;
}

.arrow-down {
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #fff;
  float: right;
  margin-top: -9px;
}

JavaScript

loadProduct.js

for(var k = 0; k < data.productFullDTO.bucketDto.length; k++){
					accordionHTML += '<dl class="accordion"><dt><a href="javascript:void(0)"><span>Bucket Display Name : ' + data.productFullDTO.bucketDto[k].bucketDisplayName+ '</span><span>Bucket ID: ' + data.productFullDTO.bucketDto[k].bucketId + '</span></a><span class="chevron arrow-right"></spanclass></dt>';
					accordionHTML += '<dd><div class="form-row-outer"><div id="filters">';
					for ( var i = 0; i < filterDTOs.length; i++) {
						accordionHTML += '<div style=\"overflow:hidden\"><div class="form-head-left">Filter-' + (i + 1) + ' Name:</div><div style="float:left"><input type=\"text\" readonly=\"readonly\" value=\"' + filterDTOs[i].filterName + '\" class=\"input-text\" name=\"productFilterDTOs[' + i + '].filterName\" id=\"filterName-'+i+'\"></div>';
						accordionHTML += '<div class="form-head-left">Filter-' + (i + 1) + ' Value:</div><div style="float:left"><input type=\"text\" value=\"' + filterDTOs[i].filterValue + '\" class=\"input-text\" name=\"productFilterDTOs[' + i + '].filterValue\" id=\"filterValue-'+i+'\"></div> </div><br/>';
						accordionHTML += '<div><input id=\"category_' + i + '\" name="productFilterDTOs[' + i + '].bucketId" type="hidden" value="' + filterDTOs[i].bucketId + '"/></div>';
						accordionHTML += '<div><input id=\"id_'+ i +'\" name="productFilterDTOs['+i+'].id" type="hidden" value="'+ filterDTOs[i].id +'"/></div>';
						accordionHTML += '<div><input id=\"filterValidValues-' + i + '\" name="productFilterDTOs[' + i + '].filterValidValues" type="hidden" value="' + filterDTOs[i].filterValidValues + '"/></div>';
					}
					accordionHTML += '</div></div></dd></dl>';
				}
			}
			//$('#filters').html(filterHtml);
			$(".bucket-filter-container").html(accordionHTML);