jquery - Store img on click and display it in other div on click -

i trying following:

• if user clicks on img, image should displayed in placeholder div , give border adding class "occupied", preferably on click.

• i got work background color property (line 1-9), however, couldn't come solution if same pictures, have tried using img tag, have tried putting img in div, background, , tried insert on click placeholder.

• i want code check if placeholder div empty or 'occupied', if empty, place pic inside, if not, place in next empty placeholder div.

ideally, solution in lines 1-9 want.

here pen got stuck:

 $('.gallery>div').click(function(){  if ($(".insert:eq(0)").hasclass("occupied"))  {$(this).clone(this)    .appendto(".insert:eq(1)").$(".wrap:eq(1)").addclass("occupie   d");}  

http://codepen.io/damianocel/pen/gawmey

thank much

you can try like

$(document).ready(function() {    var paint,      $img;    $(".color").click(function() {      paint = $(this).css('background-color');      $img = undefined;    })    $('.gallery').on('click', 'div', function() {      $img = $(this).clone();      paint = undefined;    });      $('.wrap .insert').click(function() {      $(this).css("border-color", paint);    });    $('.wrap').on('click', '.insert:not(.occupied)', function() {      if ($img) {        $(this).append($img).addclass('occupied');        $img = undefined;      }    });    });      $(document).ready(function() {    function randomcolor() {      return '#' + ('000000' + math.floor(math.random() * 16777216).tostring(16)).slice(-6);    };      $("h1").click(function() {      $('body').css('background', randomcolor());    });  })

.wrap {    display: flex;    flex-direction: row;    flex-wrap: wrap;    -webkit-justify-content: center;    -ms-flex-pack: center;    justify-content: center;    -webkit-align-content: stretch;    -ms-flex-line-pack: stretch;    align-content: stretch;    -webkit-align-items: flex-start;    -ms-flex-align: start;    align-items: flex-start;    ;    height: 100px;    width: 100p5;    border: 1px solid grey;  }  .insert {    height: 100px;    width: 100px;    border: 1px solid grey;  }  #one {    background-color: blue;    float: left;  }  #two {    background-color: red;    float: left;  }  #three {    background: green;    float: left;  }  .gallery>div {    display: inline-block;  }  .gal1 {    height: 100px;    width: 100px;    background: url("https://i.kinja-img.com/gawker-media/image/upload/s--_kjrmvsk--/c_fill,fl_progressive,g_north,h_358,q_80,w_636/19c12pvu8o9sljpg.jpg");  }  .gal2 {    height: 100px;    width: 100px;    background: url(http://www.purple-planet.com/communities/5/004/012/574/565//images/4608142514_255x230.jpg);  }  .gal3 {    height: 100px;    width: 100px;    background: url("http://image.shutterstock.com/display_pic_with_logo/892819/164734181/stock-vector-glossy-planets-colorful-vector-set-on-dark-sky-background-164734181.jpg");  }  .occupied {    border: 3px pink solid;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div id="random_background">    <h1>click</h1>      <div class="color" id="one">blue</div>    <div class="color" id="two">red</div>    <div class="color" id="three">green</div>    <div class="wrap">      <div class="insert"></div>      <div class="insert"></div>      <div class="insert"></div>    </div>    <div class="gallery">      <div class="gal1"></div>      <div class="gal2"></div>      <div class="gal3"></div>    </div>    </footer>    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>  </div>