How do i apply a function to only a specific div in a collection of divs generated by foreach loop?

When i click on SHOW MORE in one of the divs generated, in every div the footer div shows up with options Test1, Test2. I want the function to apply to the div im clicking on only. Help please :(

@foreach ($articles as $article)

    <div class="row">
    <div class="panel-heading"></div>
    <div class="panel-body"></div>

    <div class="panel-footer">
    <div class="more" onclick="showPortals()">
    Show More</div>
    <div class="other_sources">Other Sources:
                        <a href="">Test 1</a>,
                        <a href="">Test 2</a>
                        <span class="less" onclick="hidePortals()">Show Less</span>
    </div>
    </div>
    </div>

    @endforeach
    <script>
        function showPortals() {
            $(".other_sources").show();
            $(".more").hide();
        }
        function hidePortals() {
            $(".other_sources").hide();
            $(".more").show();
        }
    </script>

via Ardit Mata