Update Fields from DIV

Update a div content from clicking other div's

by sajibcse68

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 class="price" 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 class="price" 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 price" 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 summary"><span>TARGET 1</span></div>
    <div id="target2" class="hide summary"><span>TARGET 2</span></div>
    <div id="target3" class="hide summary"><span>TARGET 3</span></div>
    <div id="target4" class="hide summary"><span>TARGET 4</span></div>
    <div id="target5" class="hide summary"><span>TARGET 5</span></div>
    <div id="target6" class="hide summary"><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

$(document).ready(function() {
      $('.blue').on('click', function(e) {
          var upload = $(e.currentTarget).data('target1');
          var download = $(e.currentTarget).data('target2');
          var price = $(e.target).parent().find('.price').data('price');
          
          $('.summary').each(function(index, item) {
           console.log(item);
           $(item).removeClass('hide').addClass('hide');
          });
          
          $(upload).removeClass('hide');
          $(download).removeClass('hide');
          $('#price').text(price);

      });
  });