How to use Jquery find() function to get value when div is looping?

I am getting value of an input field through Jquery find() function .And its works well when it comes to loop like the picture below only first value is coming.

what i need is while pressing the deliver button i have to get the value inside textbox(Trackid). Here is what i have tried

Jquery

  $('.mybtn').click(function () {

            var sa = $(this).closest(".main");
            var tid = sa.find(".tid").val();
            var mid = $(this).data("mid")
          alert("trackid:"+tid+"\nmid:"+mid);
});

View

  @foreach (var group in Model.GroupBy(o=>o.orderid))  
     {

<div class="card text-center main" style="margin-bottom:24px;margin-top:24px">
  <div class="card-header ">
<button type="button" class="btn btn-success float-left orderid" data-oid="@group.Key">@group.Key</button>
  </div>
   @foreach(var i in group)
        {

  <div class="card-body">
        <div class="row">
            <div class="col-sm">
                <h6>Customer:@i.name</h6>
            <h6>Address:
                @i.address</h6>
            <h6>Contact.No:@i.mobile</h6>
                <h6>No.Of Items: @i.count</h6>
@*      <img src="@i.img" class="img-thumbnail" width="100" height="150"/>*@
                </div>
            <div class="col-sm">
                <h4>Product Name:@i.mname</h4>
                <h5><i class="fa fa-inr" aria-hidden="true"></i>@i.mrate</h5>


            </div>
            <div class="col-sm">
                @if (i.status == 0)
            {
           <h5>TrackId:</h5>
                <div><input type="text" placeholder="Tracking Number" id="tid" class="tid" /></div>
                      @*<div><button type="button" data-mid="@i.mid" class="btn btn-primary mybtn">Dispatch<i class="fa fa-bolt"></i></button></div>*@


            }
             @if (i.status == 1)
             {
            <div style="color:#ADFF2F">Dispatched</div>
                 <div>@i.trackid</div>
                    <div><i class="fa fa-check-square-o" style="color:green;font-size:24px"></i></div>
             }
            </div>
            <div class="col-sm">
                @if(i.ddate==DateTime.MinValue)
                {
                <h6>Delivery Status:Pending</h6>
                }
                else
                {
                <h6>Delivered on:@i.ddate</h6>
                }
            </div>
            </div>

        <a href="#" id="mybtn"  data-mid="@i.mid" class="btn btn-primary mybtn">Deliver</a>
  </div>

  <div class="card-footer text-muted">
    Ordered On:
  </div>
     }
     </div>
     }
        </div>
}

Like this below image .i need the textbox value place just before the button