cant add class in jquery

i am trying to add class (.trans) to my newly made clone in jquery. .but its not working. ... when i am applying class directly to my object then its working perfectly.

What i am trying to do is..

i fetch some images from database to my page.
with foreach loop i displayed those images..
then with the help of jquery clone method i create a clone of particular image when i clicked on it and the clone will displayed in a different div.
now i want to add a particular class to my newly created clone. but its not working.. (NOTE: when i am applying the same class directly on the fresh object(not clone) that time its working)

only for reference final result should look like this but after making clone.. http://jsfiddle.net/66Bna/293/

here is my code...

<?php 
$image = "1.jpg,2.jpg,3.jpg,4.jpg,5.jpg";

$image = explode(",", $image);
?>
<html>
    <head>
    <link rel="stylesheet" href="../css/jquery.freetrans.css">


    <link rel="stylesheet" href="../css/style.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
        $(".my_image").click(function(){
            $(this).clone().addClass("trans").appendTo(".block");
        });
    });
    </script>

        <style>
            body{
                user-select: none;
                -webkit-user-select: none;
                -moz-user-select: none;
                -o-user-select: none;
                -ms-user-select: none;
            }

            .shape{
                width: 300px;
                height: 250px;
                background-color: #B2D237;
                color: #123456;
            }

            #bounds {
                position: absolute;
                border: 1px solid red;
            }

            .block{
                width:100%;
                background:red;
            }
        </style>

    </head>
    <body>

<div class="library">
    <ul>
    <?php
        foreach ($image as $key => $img) {
            echo "<li class='img_block'><img class='my_image' src='assets/$img'></li>";
        }
    ?>

    </ul>
</div>

<div class="block"></div>



        <script src="../js/Matrix.js"></script>
        <script src="../js/jquery.freetrans.js"></script>

        <script>
        $(function(){
                // do a selector group
                $('.trans').freetrans({
                    x: 50,
                    y: 50
                });

                //updating options, chainable
                $('#two').freetrans({
                    x: 200,
                    y: 100,
                    angle: 45,
                    'rot-origin': "50% 100%"
                })
                .css({border: "1px solid pink"})

                var b = $('#two').freetrans('getBounds');
                console.log(b, b.xmin, b.ymax, b.center.x);

                $('#bounds').css({
                    top: b.ymin,
                    left: b.xmin,
                    width: b.width,
                    height: b.height
                })
        })
        </script>



    </body>
</html>

Ok, look. What is happening is that you're activating the Free Transform plugin in the end of the document and all the plugin does is to take the existing elements with that class and give them the features.

When we add elements and classes dynamically, they're not being taken in account by the plugin because by the time the plugin was being called, the elements didn't exist.

Understood?

So, seeing that I don't have the proper development environment for this, I will suggest some possible solutions:

1) Put this script at the bottom, below the Free Transform plugin declaration

<script>
$(document).ready(function(){
    $(".my_image").click(function(){
        $(this).clone().addClass("trans").appendTo(".block");
    });
});
</script>

2) Initialize the plugin for each added element EDIT: Fixed some logic mistake

<script>
$(document).ready(function(){
    $(".my_image").click(function() {
        $(this).clone().appendTo(".block").freetrans({
           x: 50,
           y: 50
        });;
    });
});
</script>

Just try that for now