Two questions are on my mind:
1.) Looking at my code, I have several divs with onclick events linked to the "callout panel notes" div. When this div is clicked, it accesses the data-category attribute using $(this).parent().parent().siblings().first().data("category"); although it works, it appears messy. I attempted to use parents().last().data(...) but that did not work. Any suggestions on a more efficient way to achieve this would be greatly appreciated.
2.) My second question pertains to selecting content within specific categories. After clicking on some divs, they get assigned a "selected" class. Later on, I need to fetch the selected content and send it through ajax for processing. Since there are multiple categories, I only want to loop through those belonging to data-category="a". Can anyone provide guidance on looping through data-category="a" divs with the .selected class and building a multi-line string with their respective data-response-text values?
Here is the HTML structure:
<div class="row responses panel">
<div class="small-12 column" data-category="a">
<h3>Responses</h3>
</div>
<div class="small-12 column">
<div class="callout panel notes" data-response-text="Info 1">
Info 1
</div>
</div>
<div class="small-12 column">
<div class="callout panel notes selected" data-response-text="Info 2">
Info 2
</div>
</div>
<div class="small-12 column">
<div class="callout panel notes selected" data-response-text="Info 3">
Info 3
</div>
</div>
<div class="small-12 column">
<div class="callout panel notes selected" data-response-text="Info 4">
<div class="remove-response"></div>
Info 4
</div>
</div>
<div class="small-12 column">
<div class="add-new-box">
<div class="add-new">
Add Response
</div>
<div class="add-new-text">
<input class="text-response" type="text" placeholder="Response">
</div>
</div>
</div>
</div>
<div><span class="button">Submit</span></div>