CSS not apply for dynamically created html

CSS does not apply to the dynamically added select list. But when I hard coded the select list, it applies correctly. So where I did wrong in my code. Please let me know.

$('#multiple-label-example').append(
    '<option>'+skillsObj[cnt].skillName+'</option>'
);

CSS does not apply to the above line. But it's working fine for hard coded select list.

var url= "/ajax/gDirectory/getAllskills.htm";
         $.ajax({
            type: "POST",
             url: url,
            contentType: "text/html; charset=utf-8",
            async: true,
            success : function(result1) {
                var skillsObj = JSON.parse(result1);
                $('#tabpage_4').append("<div class='side-by-side clearfix'></div><table><tr><td><h3>Skills & Expertise  :</h3></td><td id='skillstd'><select data-placeholder='Type skills here'  multiple class='chosen-select' style='width:300px;' tabindex='18' id='multiple-label-example'></select></td></tr></table>");
                for (cnt = 0; cnt < skillsObj.length; cnt++) 
                    $('#multiple-label-example').append('<option>'+skillsObj[cnt].skillName+'</option>');
            }
          }); 

          (function($){
              var config = {
                      '.chosen-select'           : {},
                      '.chosen-select-deselect'  : {allow_single_deselect:true},
                      '.chosen-select-no-single' : {disable_search_threshold:10},
                      '.chosen-select-no-results': {no_results_text:'Oops, nothing found!'},
                      '.chosen-select-width'     : {width:"95%"}
                    }

                 for (var selector in config) {
                       $(selector).chosen(config[selector]);
                      }  

              })(jQuery132);
          document.getElementById("smallimagesDiv4").style.display="none";