Send Data to JavaScript function from code behind in ASP.Net using C#

how to send Data to JavaScript function from code behind

protected void btnPlans_Click1(object sender, EventArgs e)
{
    try
    {
        // Create an instance of the API request object
        RechargeRequest oiNDICORERechargeAPIManager = new RechargeRequest();
        oiNDICORERechargeAPIManager.IPAddress = oUser.UserLoginDetails.IPAddress;
        oiNDICORERechargeAPIManager.Type = "Mobile";
        oiNDICORERechargeAPIManager.Source = "WEB";
        oiNDICORERechargeAPIManager.APIPartnerName = hdnMappedAPIPartner.Value;
        oiNDICORERechargeAPIManager.MobileNumber = txtCustomerMobile.Text;
        oiNDICORERechargeAPIManager.UserID = oUser.UserID;
        oiNDICORERechargeAPIManager.Username = oUser.FirstName + oUser.LastName;
        oiNDICORERechargeAPIManager.Latitude = "";
        oiNDICORERechargeAPIManager.Longitude = "";
        oiNDICORERechargeAPIManager.RechargeType = "Mobile";
        oiNDICORERechargeAPIManager.OperatorID = Convert.ToInt32(ddldthoperators.Items[ddldthoperators.SelectedIndex].Value);
        object response = APIsManager.BrwseAPI(hdnMappedAPIPartner.Value, oiNDICORERechargeAPIManager);
        if (response != null)
        {
            dynamic jsonResponse = JsonConvert.DeserializeObject(response.ToString());
            string fullTTContent=GenerateDynamicContent(jsonResponse["rdata"]["FULLTT"]);
            string topupContent = GenerateDynamicContent(jsonResponse["rdata"]["TOPUP"]);
            //GenerateDynamicContent(jsonResponse["rdata"]["Romaing"], litDynamicContent4);
            litDynamicContent.Text = fullTTContent;
            litDynamicContent2.Text = topupContent;
            // Set content for other tabs as needed
            ScriptManager.RegisterStartupScript(this, GetType(), "ShowModal", $"populateAndShowModal('{fullTTContent}', '{topupContent}');", true);
        }
    }
    catch (Exception ex)
    {
        lblApiResponse.Text = "An error occurred while processing your request.";
        oExceptionManager.LogError(ex.Message, " -- In btnPlans_Click1 function");
    }
 
}
private string GenerateDynamicContent(dynamic packs)
{
    StringBuilder htmlBuilder = new StringBuilder();
 
    foreach (var pack in packs)
    {
        string amount = pack["rs"];
        string validity = pack["validity"];
        string description = pack["desc"];
 
        htmlBuilder.Append($@"
    <div class='col-sm-12 sd8'>
        <h3>{amount}</h3>
        <span>Validity: {validity}</span>
        <p>{description}</p>
        <button class='form-group sde' onclick='setAmount({amount})'>Recharge now</button>
    </div>");
    }
 
    return htmlBuilder.ToString();
}

here i can able to generate data but unable to send it to the my JS function to show that data in a popup modal

$(document).ready(function () {
    debugger
    populateAndShowModal(fullTTContent, topupContent);
});
 
function populateAndShowModal(fullTTContent, topupContent) {
    debugger
    // Populate modal with the provided content
    $('#myModal').html(fullTTContent + topupContent);
 
    // Show the modal
    $('#myModal').modal('show');
}

and my modal

<div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog modal-md">
      <div class="modal-content">
      <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        <div class="modal-body">
        <div class="form-group col-lg-12 col-md-12">
                                     <asp:TextBox ID="TextBox1" placeholder="Search Plan Name" name="txtCustomerMobile" class="form-control" runat="server" onkeypress="return isNumber(event)" MinLength="10" MaxLength="10" AutoCompleteType="None" autocomplete="off" ></asp:TextBox>
                                 </div>
            <div class="form-group col-lg-12 col-md-12">
            <ul class="nav nav-pills sdul">
    <li class="active"><a data-toggle="pill" href="#home">Talk Time</a></li>
    <li><a data-toggle="pill" href="#menu1">TOPUP</a></li>
    <li><a data-toggle="pill" href="#menu2">3G/4G</a></li>
    <li><a data-toggle="pill" href="#menu3">2G</a></li>
    <%--<li><a data-toggle="pill" href="#menu4">Romaing</a></li>--%>
     
  </ul>
           </div>
  <div class="tab-content">
      
        <div id="home" class="tab-pane fade in active">
        <div class="col-sm-12 sd8">
            <asp:Label ID="lblApiResponse" runat="server"></asp:Label>
            </div>
        <div>
            <div id="menu1"  class="tab-pane fade in active">
        <asp:Literal ID="litDynamicContent" runat="server"></asp:Literal>
        </div>
            </div>
 
        
 
    </div>
 
    <div id="menu2"  class="tab-pane fade in active">
      <%--<h3>Menu 1</h3>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>--%>
 
        <div>
        <asp:Literal ID="litDynamicContent2" runat="server"></asp:Literal>
        </div>
 
    </div>
    <div id="menu3" class="tab-pane fade in active">
        <div>
        <asp:Literal ID="litDynamicContent3" runat="server"></asp:Literal>
        </div>
      <%--<h3>Menu 2</h3>
      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>--%>
 
    </div>
    <div id="menu4" class="tab-pane fade">
     <%-- <h3>Menu 3</h3>
      <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>--%>
    </div>   
  <%--    <div id="menu4" class="tab-pane fade">
      <h3>Menu 3</h3>
      <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
    </div> --%>
 
  </div>
  
        </div>
        
      </div>
    </div>
</div>

from code behind i can able to get data but unable to bind it with modal and my button

<asp:Button runat="server" class="input-button vwp" id="btnPlans" data-toggle="modal" data-target="#myModal" OnClick="btnPlans_Click1" Text="View Plans"></asp:Button>

and styles for my modal

.modal-header {
    padding: 4px;
     box-shadow:none !important;
}
.modal-open .modal {
    overflow-x: hidden;
     overflow-y: hidden !important;
}
       .modal-content {
    border-radius: 10px;
    left: 100%;
    width:77%;
    max-height:727px;
    border-radius: 50px 0 0 50px !important;
    overflow-y:scroll !important;
}