Onclick of an image, dropdown hide

Onclick of an image, dropdown hide

Hi,

I am need of a help regarding onclick image in a dropdown.

When I click any of this dropdown, I am able to show the dropdown. When an user click any image inside the dropdown, I can able to replace the dropdown arrow with that selected image.
But user need to click the next arrow two times to show the dropdown.

This is screen shot of the actual,

First Screenshot:




Second Screenshot:



Third Screenshot:



My JS:

-----------------------------Starts here--------------------------------

var icon ;

function display()
{
     assetName = '<%=request.getParameter("assetName")%>';
     paramName=$('#dropDownId').val();
    // var newdiv = document.createElement('div');   
     var icons=document.getElementById("divId").innerHTML;
    parameterManager.getPossibleValuesForParam(assetName,paramName,null,function(data)   
    {
        document.getElementById("placeHolder");
        var tempStr="<div><table class='param_values'><div style='margin-left:15px; margin-right:5px;padding: 5px 5px 5px 0px;width:auto;clear:both;'><div style='width:30px; float:left;';</div></div>";
         for (var i = 0; i < data.length; i++)
            {
                   
                tempStr = tempStr+"<tr><td>Choose Icon for "+ data[i]+"</td><td class='parameter'>"+icons+"</td></tr>";
                   
            }
         alert(icons);
         document.getElementById("placeHolder").innerHTML=tempStr+"</table></div>";
        // document.getElementById("divForPI").appendChild(newdiv1);
    });
}
 /* $(document).ready(function ()
        {
    $('#test').hide();
}); */
      function myfunction(obj)
                    {
                     icon=obj;
                    var X=$(this).attr('id');
                    if(X==1)
                    {
                    $("#dropdownStyle").hide();
                    $(this).attr('id', '0');   
                    }
                    else
                    {
                    $("#dropdownStyle").show();
                    $(this).attr('id', '1');
                    }
                    }
      $(document).ready(function(){
                    //Mouseup textarea false
                    $("#dropdownStyle").mouseup(function ()
                    {
                    return false;
                    });
                    $(".dropdownarrowIcon").mouseup(function()
                    {
                    return false;
                    });


                    //Textarea without editing.
                    $(document).mouseup(function()
                    {
                    $("#dropdownStyle").hide();
                    $(".dropdownarrowIcon").attr('id', '');
                    });
                   
           
        $('table img').click(function()
        {
        $(this).each(function ()
        {
        var srcImgs = $(this).attr('src');
        $(icon).attr('src', srcImgs);
        $("#dropdownStyle").hide();
       
        });  
        });
        });

---------------------------Ends here-----------------------------------

HTML :

--------------------------Starts here----------------------------------

<div id="placeHolder"></div>

(Just using this div inside my html)*

-------------------------Ends here------------------------------------

Please help me in this issue.
Thanks in advance