jQuery/AJAX - Can't get the correct selector

jQuery/AJAX - Can't get the correct selector

I'm looking for a little assistance, but mostly an explanation so I can avoid this issue in the future.

I have a PHP script that is called using AJAX. The output of that script fills a div with an ID of 'schedule_wrapper_all' and is as follows:

  1. <div id="schedule_wrapper_all">
  2. =====================GENERATED CODE======================
  3.   <div class="appointments">
  4.     <div class="appt" value="2">
  5.       <p class="c_name">William Davis</p>
  6.       <div class="c_info" style="display: block;">
  7.         <p class="c_street">230 N State Rd</p>
  8.         <p class="c_city">Davison</p>
  9.         <p class="c_time">11:00:00</p>
  10.         <p class="c_phone">Phone 1: </p>
  11.         <p class="c_phone_alt">Phone 2: </p>
  12.     </div>
  13.     <div class="c_functions" style="display: block;">
  14.       <p><button type="button" class="view_notes">View Notes</button></p>
  15.         <div class="d_view_notes" style="display: none;"></div>
  16.           <p><button type="button" class="add_note">Add Note</button></p>
  17.           <p><button type="button" class="reschedule">Reschedule</button></p>
  18.           <p><button type="button" class="reassign">Reassign</button></p>
  19.       </div>
  20.    </div>
  21.  </div>
  22. ==================END GENERATED CODE====================
  23. </div>

Here's the jQuery:
  1. $('#schedule_wrapper_all').on('click', '.appointments .appt .view_notes', function(e) {
  2.         e.stopImmediatePropagation();
  3.         var leadID = $(this).closest('.appt').attr('value');
  4.         $.ajax({
  5.             method: 'post',
  6.             url: 'scripts/get_notes.php',
  7.             data: {
  8.                 'leadID': leadID
  9.             },
  10.             success: function(data) {
  11.       //=============PROBLEMATIC AREA=================
  12.                 $('.d_view_notes').html(data).slideToggle();
  13.       //==============================================
  14.             }
  15.         });//end ajax - Fill Notes
  16.     });

The script works, except the data filled by the AJAX call fills to all divs with the class 'd_view_notes', and there are multiple on the screen. What I want to happen is that when the button is clicked, it only fills the 'd_view_notes' contained within the selected 'appt' div.

After hours of trying, the closest I have come to getting the right selector is:

$(this).closest('.c_functions').find('.d_view_notes').html(data)

but is is not working. I would not only appreciate the right selector, but a quick explanation of WHY I need to choose that selector. Thanks so much for any help!