Q:

Nested data-toggle elements

I have a sort of table display which I generate in a loop.

<div class="container agenda" id="test_container">


<div class="agenda-item row v-center border-top border-5 py-2" data-toggle="modal" data-target="#test_1">
    <div class="col-12 col-md-2 font-weight-bold timeslot"><i class="far fa-clock location-icon"></i>09.45-10.15</div>
    <div class="col-12 col-md-3 text-primary">
        <p><strong>First title</strong></p>
    </div>
    <div class="col-12 col-md-6">
        <p class=""><b>Some Text 1</b></p>Some other text 1
    </div>
    <div class="col-12 col-md-1 toggle-collapse"><span class="fas fa-2x fa-plus-circle" data-target="#test_1_collapsible" role="button" aria-expanded="false" aria-controls="test_1_collapsible"></span></div>
</div>

<div id="test_1_collapsible" class="row collapse">
    <div class="col-10 offset-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
</div>


<div class="agenda-item row v-center border-top border-5 py-2" data-toggle="modal" data-target="#test_2">
    <div class="col-12 col-md-2 font-weight-bold timeslot"><i class="far fa-clock location-icon"></i>10.30-11.00</div>
    <div class="col-12 col-md-3 text-primary">
        <p><strong>Second title</strong></p>
    </div>
    <div class="col-12 col-md-6">
        <p class=""><b>Some text 2</b></p>Some other text 2
    </div>
    <div class="col-12 col-md-1 toggle-collapse"><span class="fas fa-2x fa-plus-circle" data-target="#test_2_collapsible" role="button" aria-expanded="false" aria-controls="test_2_collapsible"></span></div>
</div>

<div id="test_2_collapsible" class="row collapse">
    <div class="col-10 offset-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>


<div class="agenda-item row v-center border-top border-5 py-2" data-toggle="modal" data-target="#test_3">
    <div class="col-12 col-md-2 font-weight-bold timeslot"><i class="far fa-clock location-icon"></i>11.15-11.45</div>
    <div class="col-12 col-md-3 text-primary">
        <p><strong>Some title 3</strong></p>
    </div>
    <div class="col-12 col-md-6">
        <p class=""><b>Some text 3</b></p>Some other text 3
    </div>
    <div class="col-12 col-md-1 toggle-collapse"><span class="fas fa-2x fa-plus-circle" data-target="#test_3_collapsible" role="button" aria-expanded="false" aria-controls="test_3_collapsible"></span></div>
</div>

<div id="test_3_collapsible" class="row collapse">
    <div class="col-10 offset-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>

</div>

What I'm trying to do is to pop up the modal whenever I press anywhere on the row div except when I press on the plus icon. Then I want to expand/collapse the extra division with info. I understand that plus icon falls under modal trigger.
Tried playing around with event.stopPropagation(); but that didn't lead anywhere.
Of course, I could add data-toggle on each other sibling div instead of a parent one, but that would create dead space which would not trigger the modal (a thing I would prefer to avoid).
Any ideas on how to achieve this?
EDIT:
Someone asked for script:
$(document).ready(function(){

$('.agenda .row').on('click', '.toggle-collapse', function(e){

  var collapse_element = $(e.target.getAttribute('data-target'));

  e.stopPropagation();

  collapse_element.siblings('.collapse').collapse('hide');
  collapse_element.collapse('toggle');

});

With collapse_element.siblings('.collapse').collapse('hide'); achieving an accordian-like behaviour.

A:

You can use event delegation instead of inline data attributes to show your modal, passing in the selector to exclude the plus sign child of the row, this uses JQuery's .on() with event delegation, you would want to add this script on DOM Ready or if the table is generated as you say, via script, run this after the table is completely formed, or you can modify this to use delegation on the table itself:
$(".row").on('click', ':not(.fa-plus-circle)', function (e) {
     //e.stopPropagation(); Not necessary if you remove the data-toggle="modal" data-target="#example_modal" from your .row element
     // Show dialog
     $('#example_modal').modal('show');
});

