Update Fields from DIV

Update a div content from clicking other div's

by Rodrigo Cunha

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<div class="col-xs-3">
  <div class="col-xs-12 blue" data-target1="#target1" data-target2="#target2">
  <span>$</span><span data-price="300" id="1">300</span><br>
  <p id="desc1" class="hide">Description 1</p>
    <span>text here</span><br>
    <span>text here</span><br>
    <span>text here</span>
  </div>
</div>
<div class="col-xs-3">
  <div class="col-xs-12 blue" data-target1="#target3" data-target2="#target4">
  <span>$</span><span data-price="600" id="2">600</span><br>
   <p id="desc2" class="hide">Description 2</p>
    <span>text here</span><br>
    <span>text here</span><br>
    <span>text here</span>
  </div>
</div><div class="col-xs-3">
  <div class="col-xs-12 blue" data-target1="#target5" data-target2="#target6">
  <span>$</span><span class="prices" data-price="1200" id="3">1200</span><br>
     <p id="desc3" class="hide">Description 3</p>
    <span>text here</span><br>
    <span>text here</span><br>
    <span>text here</span>
  </div>
</div>
<div class="col-xs-3">
  <div class="col-xs-12 red">
    <span class="bold">Summary</span><br>
    <div id="target1" class="hide"><span>TARGET 1</span></div>
    <div id="target2" class="hide"><span>TARGET 2</span></div>.
    <div id="target3" class="hide"><span>TARGET 3</span></div>
    <div id="target4" class="hide"><span>TARGET 4</span></div>
    <div id="target5" class="hide"><span>TARGET 5</span></div>
    <div id="target6" class="hide"><span>TARGET 6</span></div>
    <span id="price" class=""></span>
  </div>
</div>

CSS

div {
  margin:0;
  padding:0;
}
.blue {
  background-color: #ddddEE;
  border: 1px solid black;
}
.blue:hover {
  cursor: pointer;
  background-color: #aaaaEE;
}
.red {
  background-color: #EEdddd;
  border: 1px solid black;
}
.bold {
  font-weight: 600;
  text-align: center;
}
.hide {
  display:none;
}
#price {
  font-size: 22px;
  color: blue;
  font-weight: 400;
}

JavaScript

var upload = $('.blue').data('target1');
var download = $('.blue').data('target2');
var price = $(this).data('price');

      $(document).ready(function() {
          $('.blue').on('click', function() {
              $(upload).removeClass('hide');
              $(download).removeClass('hide');
          });
          $('#price').text(price);
      });