Click on a div, take a text and copy paste it in a table

Question

I have a plugin in my website and I want to customize a feature that it doesn't provide me.

<div id="4_15:00" class="DOPBSPCalendar-hour dopbsp-available">
   <div class="dopbsp-bind-top">
      <div class="dopbsp-hour">&nbsp;</div>
   </div>
   <div class="dopbsp-bind-middle dopbsp-group0">
      <div class="dopbsp-hour">15:00</div>
      <div class="dopbsp-available">1 available</div>
   </div>
   <div class="dopbsp-bind-bottom">
      <div class="dopbsp-hour">&nbsp;</div>
   </div>
</div>
<div id="4_16:30" class="DOPBSPCalendar-hour dopbsp-available dopbsp-selected">
   <div class="dopbsp-bind-top">
      <div class="dopbsp-hour">&nbsp;</div>
   </div>
   <div class="dopbsp-bind-middle dopbsp-group0">
      <div class="dopbsp-hour">16:30</div>
      <div class="dopbsp-available">1 available</div>
   </div>
   <div class="dopbsp-bind-bottom">
      <div class="dopbsp-hour">&nbsp;</div>
   </div>
</div>

This is the part of the table I want to show the selected time under the date:

<table class="dopbsp-cart">
   <tbody>
      <tr>
         <td class="dopbsp-label">Check in</td>
         <td class="dopbsp-value">19 February 2015</td>
      </tr>

And here is my jQuery:

<script>
   jQuery(document).ready(function () {
     jQuery('.DOPBSPCalendar-hour.dopbsp-available').click(function (e) {
       t = jQuery('.dopbsp-selected .dopbsp-hour').text();
       table = jQuery('table.dopbsp-cart .dopbsp-value');
       table.first().append("<br>"+t)
     });
   });
</script>

When a user select a specific time, it automatically adds the class: dopbsp-selected . So, I want to take the selected time and add it below the date. However, I don't have any error on the console and I cannot find the reason that doesn't work.

Answer 1

Your selectors are wrong:

 jQuery('.DOPBSPCalendar-hour .dopbsp-available').click(function (e) {
                             ^---

The space means you want nested elements, the first having .DOBetc... , and then a child element with .dobspetc... . Try

 jQuery('.DOPBSPCalendar-hour.dopbsp-available').click(function (e) {
                             ^--- no space

which indicates "any one element with these two classes applied".

Answer 2

The selector you are using is wrong.

.DOPBSPCalendar-hour .dopbsp-available

The space show that .dopbsp-available is nested to .DOPBSPCalendar-hour

But what you want is .DOPBSPCalendar-hour.dopbsp-available

which means a element has both the classes