Select icon for multiple labels

Select icon for multiple labels



 
  
Hi,

I am new to newbie to jquery. I have already done when selecting arrow icon,the drop down will come(second fig)(Code is attached with this).Now I want to do when I click  more than one arrow icon, drop down should come for different arrow icons(like second fig).For the above functionality I got the code from JSFIDDLE.So please help me regarding this.

  1. $(document).ready(function()
            {
                $(".dropdownarrowIcon").click(function()
                        {
                        var X=$(this).attr('id');
                       
                        if(X==1)
                        {
                        $("#dropdownStyle").hide();
                        $(this).attr('id', '0');   
                        }
                        else
                        {
                        $("#dropdownStyle").show();
                        $(this).attr('id', '1');
                        }
                        });

                        //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');
            $('a.dropdownarrowIcon img').attr('src', srcImgs);
            $("#dropdownStyle").hide();
            });  
            });
            }); 













































  2.  <div id="divId">
       
        <a class="dropdownarrowIcon"><img src="images/assets/arrow.png" /></a>
         
        <div id="dropdownStyle" style="display: none;">
                   
        <table>
            <tr>
                <td><img width="16px" height="16px" src="images/assets/1.gif"/></td>
                       
                <td><img width="16px" height="16px" src="images/assets/2.gif" /></td>

                <td><img width="16px" height="16px" src="images/assets/3.gif" /></td>

                <td><img width="16px" height="16px" src="images/assets/4.gif" /></td>
                       
                <td><img width="16px" height="16px" src="images/assets/21.gif" /></td>
     
            </tr>
        </table>

         <table>
            <tr>
                <td><img width="16px" height="16px" src="images/assets/5.gif" /></td>

                <td><img width="16px" height="16px" src="images/assets/6.gif" /></td>

                <td><img width="16px" height="16px" src="images/assets/7.gif" /></td>

                <td><img width="16px" height="16px" src="images/assets/8.gif" /></td>
               
                <td><img width="16px" height="16px" src="images/assets/22.gif"  /></td>
       
            </tr>
        </table>
       
        <table>
            <tr>
                <td><img width="16px" height="16px" src="images/assets/9.gif" /></td>

                <td><img width="16px" height="16px" src="images/assets/10.gif" /></td>

                <td><img width="16px" height="16px" src="images/assets/11.gif" /></td>

                <td><img width="16px" height="16px" src="images/assets/12.gif" /></td>
               
                <td><img width="16px" height="16px" src="images/assets/23.jpg"/></td>

               
            </tr>
        </table>
        <table>
            <tr>
                <td><img width="16px" height="16px" src="images/assets/13.gif" /></td>

                <td><img width="16px" height="16px" src="images/assets/14.gif" /></td>

                <td><img width="16px" height="16px" src="images/assets/15.gif" /></td>

                <td><img width="16px" height="16px" src="images/assets/16.gif" /></td>
               
                <td><img width="16px" height="16px" src="images/assets/24.gif" /></td>

               
            </tr>
        </table>
       
        <table>
            <tr>
                <td><img width="16px" height="16px" src="images/assets/17.gif" /></td>

                <td><img width="16px" height="16px" src="images/assets/18.gif" /></td>

                <td><img width="16px" height="16px" src="images/assets/19.png" /></td>

                <td><img width="16px" height="16px" src="images/assets/20.png" /></td>
               
                <td><img width="16px" height="16px" src="images/assets/17.gif" /></td>
               
            </tr>
        </table>
        </div>
       </div>


















































































  3. #dropdownStyle
    {
    width: 230px;
    background: #fff;
    position: absolute;
    top: 290px;
    left: 405px;
    z-index: 100;
    display: none;
    margin-left: 160px;
    padding-top: 25px;
    padding-bottom:5px;
    padding-left:10px;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
    }
     
    #dropdownStyle td
    {
    height: 20px;
    padding-bottom: 10px;
    }


    a.dropdownarrowIcon
    {
    font-size: 11px;
    color: #555;
    position: absolute;
    z-index: 110;
    display: block;
    padding: 0px 0 0 20px;
    left:426px;
    height: 15px;
    width: 15px;
    margin: 0px -100px 0px 120px;
    text-decoration: none;
    cursor:pointer;
    }








































Thanks in advance,

Regards,
Karthikeyan