How to add an ID in a same class of div in a external javascript link?

Question

I have a javascript link in my html, which is coming from third party. I can't edit the html inside the javascript link directly, but can edit, delete or add using CSS, Javascirpt or Jquery.

The javascript link is:

<div class="fluid-container" style="margin-top:10px;">
        <div class="fluid-container-info">          
            <script src="https://worldtravelink.com/client.ijs?userId=2&amp;resultPage=https://www.ezeerooms.in/m/result.html&amp;state=payment&amp;currency=INR&amp;ver=1.0&amp;confirmPage=https://www.ezeerooms.in/m/confirm.html" type="text/javascript"></script>
        </div>        
    </div>

I found the following html code inside the javascript link by using Firebug. I have deleted and edited some lengthy part of this html.

<div class="wrapper_RightZone">
    <div class="PackageInfoBox">
        <div class="hotel_Package_info_Price">
            <div class="Price_Box">               
                <div class="Price">
                    <font class="PriceElement">23285.33</font>
                    <font class="CurencyElement">INR</font>
                </div>               
            </div>
        </div>       
    </div>   
    <div class="payment-title">
        <div class="StrongClass PaymentDetailsTitle"><button>Payment details</button></div>
    </div>   
    <div class="PackageInfoBox">
        <div class="RoomType_PriceRow">               
            <div class="Cel1Right">Content</div>
        </div>       
        <div class="gm_wrapper">
            <div>
                <div class="subpayment-title">               
                    <div class="StrongClass PaymentOptionTitle"><button>Payment options</button></div>                 
                </div>
                <div class="PackageInfoBox">
                    <div class="Payment_OptionsBox">
                        <div class="pay_credit" id="pay_credit">Content</div>
                    </div>    
                </div>                  
            </div>
        </div> 
    </div>
</div>

I have made some modification by CSS and Javascript. I want to toggle PackageInfoBox DIV (class="PackageInfoBox"), when I will click on 'subpayment-title' DIV. But problem is same class name i.e., PackageInfoBox. There are four PackageInfoBox class, so it is not possible to identify the last PackageInfoBox DIV, which I want to toggle. So I have used this jquery function to add an ID in the last PackageInfoBox DIV.

<script type="text/javascript">
$(document).ready(function() {
     $(".gm_wrapper .PackageInfoBox").attr("id","SomeID");
});
</script>

And used this jquery function to toggle the PackageInfoBox DIV.

<script>
$(".subpayment-title").click(function(){
  $("#SomeID").toggle();
});
</script>

But its not working, and not created ID (SomeID) in last PackageInfoBox DIV.

Anyone can help me?

Answer 1

just use this code if you want your last element of PackageInfoBox

<script type="text/javascript">
    $(document).ready(function() {
         $(".PaymentOptionTitle").on('click',function(){
            $(this).closest('.subpayment-title').next().next().slideToggle();
         });
    });
   </script>

DEMO