Как я могу выделить div внутри оверлея, используя Jquery

Question

Хотелось бы нажать на всплывающее окно div и highlight, this div is inside an overlay`. У меня есть код jquery, добавленный ниже, но подсветка не происходит. Может кто-нибудь посоветовать, пожалуйста, как я могу это исправить?

Добавлен html, отображаемый ниже

$('#projectDataHereToDisplay > .row').click(function() {
  $(this).removeClass("highlight");
  $(this).addClass("highlight");
});

.highlight {
  background: #ebdb34;
}

.cleaner {
  float: left;
  padding: 20px 10px 10px 20px;
}

.rows {
  width: 1000px;
  min-height: 80px;
}

.rowsAlt {
  background-color: #edece8;
}

.cols {
  height: 100%;
  float: left;
}

.col1 {
  width: 100px;
  float: left;
  padding: 20px 10px 10px 20px;
}

.col2 {
  width: 100px;
  float: left;
  padding: 20px 10px 10px 20px;
}

.col3 {
  width: 200px;
  float: left;
  padding: 20px 10px 10px 20px;
}

.col4 {
  width: 100px;
  float: left;
  padding: 20px 10px 10px 20px;
}

.col5 {
  width: 100px;
  float: left;
  padding: 20px 10px 10px 20px;
}

.col6 {
  width: 100px;
  float: left;
  padding: 20px 10px 10px 20px;
}

#row2 {
  margin-left: 100px;
  margin-top: 50px;
  position: relative;
  width: 83%;
  margin: 20px 0px 0px 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="projectDataHereToDisplay" class="column">
  <div class="row">
    <div id="row2" class="rows rowsAlt">
      <div class="col1">FLG</div>
      <div class="col2">sun</div>
      <div class="col3">man,lion</div>
      <div class="col4"></div>
      <div class="col5">Byes</div>
      <div class="cleaner">Add here</div>
      <div class="col6"><a class="projecteditLink" href="">Edit Link</a></div>
    </div>
  </div>

  <div class="row">
    <div id="row2" class="rows rowsAlt">
      <div class="col1">FLG</div>
      <div class="col2">sun</div>
      <div class="col3">man,lion</div>
      <div class="col4"></div>
      <div class="col5">Byes</div>
      <div class="cleaner">Add here</div>
      <div class="col6"><a class="projecteditLink" href="">Edit Link</a></div>
    </div>
  </div>
</div>

Answer 1

Это решит ваш вопрос. Теперь он выделит ваш ряд.

$('.rows').click(function() {

  $(this).removeClass("highlight");
  $(this).addClass("highlight");
});

<style>
.highlight {
  background: #ebdb34 !important;
}

.cleaner {
  float: left;
  padding: 20px 10px 10px 20px;
}

.rows {
  width: 1000px;
  min-height: 80px;
}

.rowsAlt {
  background-color: #edece8;
}

.cols {
  height: 100%;
  float: left;
}

.col1 {
  width: 100px;
  float: left;
  padding: 20px 10px 10px 20px;
}

.col2 {
  width: 100px;
  float: left;
  padding: 20px 10px 10px 20px;
}

.col3 {
  width: 200px;
  float: left;
  padding: 20px 10px 10px 20px;
}

.col4 {
  width: 100px;
  float: left;
  padding: 20px 10px 10px 20px;
}

.col5 {
  width: 100px;
  float: left;
  padding: 20px 10px 10px 20px;
}

.col6 {
  width: 100px;
  float: left;
  padding: 20px 10px 10px 20px;
}

#row2 {
  margin-left: 100px;
  margin-top: 50px;
  position: relative;
  width: 83%;
  margin: 20px 0px 0px 100px;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="projectDataHereToDisplay" class="column">
  <div class="row">
    <div id="row2" class="rows rowsAlt">
      <div class="col1">FLG</div>
      <div class="col2">sun</div>
      <div class="col3">man,lion</div>
      <div class="col4"></div>
      <div class="col5">Byes</div>
      <div class="cleaner">Add here</div>
      <div class="col6"><a class="projecteditLink" href="">Edit Link</a></div>
    </div>
  </div>

  <div class="row">
    <div id="row2" class="rows rowsAlt">
      <div class="col1">FLG</div>
      <div class="col2">sun</div>
      <div class="col3">man,lion</div>
      <div class="col4"></div>
      <div class="col5">Byes</div>
      <div class="cleaner">Add here</div>
      <div class="col6"><a class="projecteditLink" href="">Edit Link</a></div>