jQuery selector for a non-parent element

Question

In the code below I need to select only the span with text 101 if the user clicks on #check1 or #check2.

If the user clicks on #check3 or #check4 the span that must be chosen is the one with the text 201.

Thanks in advance for any help

<div class="aaa">
    <h5 class="bbb">
        <button class="ccc"">
            100
            <span class="ddd">101</span>
        </button>
    </h5>
</div>
<div class="eee">
    <div class="fff">
        <div class="ggg">
            <div class="hhh">
                 <div class="iii">
                      <div class="lll">
                           <input type="checkbox" class="mmm" id="check1">
                           <label class="nnn" for="check1">102</label>
                      </div>
                      <div class="lll">
                           <input type="checkbox" class="mmm" id="check2">
                           <label class="nnn" for="check2">103</label>
                      </div>
                 </div>
            </div>
        </div>
    </div>
</div>

<div class="ooo">
    <h5 class="ppp">
        <button class="qqq"">
            200
            <span class="ddd">201</span>
        </button>
    </h5>
</div>
<div class="sss">
    <div class="ttt">
        <div class="uuu">
            <div class="vvv">
                 <div class="xxx">
                      <div class="lll">
                           <input type="checkbox" class="mmm" id="check3">
                           <label class="nnn" for="check3">202</label>
                      </div>
                      <div class="lll">
                           <input type="checkbox" class="mmm" id="check4">
                           <label class="nnn" for="check4">203</label>
                      </div>
                 </div>
            </div>
        </div>
    </div>
</div>