<?php
if (isset($_POST["submit"])) {
    $name = $_POST["name"];
    $email = $_POST["email"];
    $phone = $_POST["phone"];
    $message = $_POST["message"];
    
    
    
   // echo "<p>Name: $name</p>";
   // echo "<p>Email: $email</p>";
    // Display other values here if needed
}
//else{
// echo '<script type="text/javascript"> window.location = "https//://thebusinessautomation.com/demo1" </script>';

//}?>
<!doctype html>
<html lang="en">
  <head>
       <!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-KP8FBM6L');</script>
<!-- End Google Tag Manager --> 

    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,700,900&display=swap" rel="stylesheet">

    <link rel="stylesheet" href="fonts/icomoon/style.css">

<!-- Google Web Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&family=Rubik:wght@400;500;600;700&display=swap" rel="stylesheet">




    <!-- Icon Font Stylesheet -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css" rel="stylesheet">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="bootstrap.min.css">
    
    <!-- Style -->
    <link rel="stylesheet" href="css/style2.css">
    
    <!-- Google tag (gtag.js) -->
<!--<script async src="https://www.googletagmanager.com/gtag/js?id=G-NTWHTCVWFV"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-NTWHTCVWFV');
</script>-->

    <!--style-->
    <style>
  /*--body {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  background-color: #697c37;
  color: rgba(255, 255, 255, 0.5);
  line-height: 2; }*/

/*h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: "Poppins", sans-serif;
  color: #000; }*/


.btnv{
    border: none;
    border-radius: 5px;
    color: #fff;
    text-transform: uppercase;
    padding-bottom: 15px;
    position: relative;
    background-image: linear-gradient(to top, #262626 0px, #404040 4px, #262626 10px, #333 100%);
}
.btnv:hover{
    color: #fff;
}
.btnv:after{
    content: "";
    width: 0;
    height: 10px;
    position: absolute;
    bottom: 0;
    left: 0;
    border-radius: 0 0 5px 5px;
    transition: all 0.35s ease 0s;
}
.btnv:hover:after{
    width: 100%;
}
.btnv.btn-sm{
    padding: 12px 40px;
    background-image: linear-gradient(to top, #262626 0px, #404040 8px, #262626 8px, #333 100%);
    font-size: 20px;
}
.btnv.btn-sm:after{
    height: 4px;
}
.btnv.btn-xs{
    padding-bottom: 8px;
    background-image: linear-gradient(to top, #262626 0px, #404040 6px, #262626 6px, #333 100%);
}
.btnv.btn-xs:after{
    height: 6px;
}
.btnv.red:after{
    background: #f6821d;
}

@media only  screen and (max-width: 767px){
 .btnv{ margin-bottom: 20px; }
}


.slide-track {
  width: 100%;
  display: flex;
  gap: 3em;
  overflow: hidden;
}

.slider {
  
  padding: 3em 2em;
}

@keyframes scroll {
  0% {transform: translateX(0);}
  100% {transform: translatex(-1000%)}
}
.slideimg {
  width: 200px;
  height: 200px;
  animation: scroll 10s linear infinite;
}

a {
  -webkit-transition: .3s all ease;
  -o-transition: .3s all ease;
  transition: .3s all ease; }
  a, a:hover {
    text-decoration: none !important; }

.text-black {
  color: #000; }

.content {
  padding: 5rem 0; 
    background-color: #424443;
     color: rgba(255, 255, 255, 0.5);
}
.bhjk {
       width: 100% !important;
}

h2 {
  font-size: 3.5rem;
  font-weight: 700; }

h3 {
  font-size: 2rem;
  font-weight: 700;
  color: #fff; }

.form-control {
  border: none;
  border: 1px solid #ccc;
  border-radius: 4px; }
  .form-control:active, .form-control:focus {
    outline: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    border-color: #000; }

.col-form-label {
  color: #000; }

 .form-control, .custom-select {
  height: 50px; }

.custom-select:active, .custom-select:focus {
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  border-color: #000; }

.heading {
  color: #888;
  letter-spacing: .05rem;
  text-transform: uppercase;
  font-weight: 400; }

.btn {
  color: #fff;
  border: none;
  border-radius: 4px !important;
  -webkit-box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.1) !important;
  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.1) !important; }
  
  .btn:hover {
    color: #fff;
    background: #f6821d;
}
  .btn:active, .btn:focus {
    outline: none;
    -webkit-box-shadow: none;
    box-shadow: none; }

.box {
  padding: 35px 20px 10px 20px;
  background: #fff;
  -webkit-box-shadow: -30px 30px 0px 0 rgba(0, 0, 0, 0.08);
  box-shadow: -30px 30px 0px 0 rgba(0, 0, 0, 0.08); }
  .box h3 {
    font-size: 18px;
    margin-bottom: 30px;
    text-align: center;
    color: #f48325;
    line-height: 30px;
  }

label.error {
  font-size: 12px;
  color: red; }

#message {
  resize: vertical; }

#form-message-warning, #form-message-success {
  display: none; }

#form-message-warning {
  color: #B90B0B; }

#form-message-success {
  color: #55A44E;
  font-size: 18px;
  font-weight: bold;
  text-align: center; }

.submitting {
  text-align: center;
  float: left;
  width: 100%;
  padding: 10px 0;
  display: none;
  font-weight: bold;
  font-size: 12px;
  color: #000; }
@media (max-width: 1399px){

.regpgarrow img {
    top: 382px !important;
}

.btnv.btn-sm {
    padding: 13px 20px;
}
p.intp {
    line-height: 70px;
}

}
@media (max-width: 1199px){
p.intp {
    font-size: 45px;
}
.content {
    padding: 3rem 0;
}
.box {
    padding: 25px 10px 10px 10px;
}
blockquote {
    width: 350px;
    padding: 0px 15px;
}
.regpgarrow img {
    top:468px;
}
#symbol {
    
    font-size: 95px;
    height: 65px;
    line-height: 95px;
}
.btnv.btn-sm {
    font-size: 18px;
}
}
@media (max-width: 991px){
.col-md-3.col-sm-12.ty{
    width: 100% !important;
    text-align: center !important;
}
.content {
    padding: 4rem 0;
}
p.intp {
    font-size: 45px;
    padding-top: 20px;
    padding-bottom: 0px;
}
.fullw {
    font-size: 26px;
}
.col-md-6.byi {
    width: 100%;
}
a.whatsapp-float.t.bnr {
    float: none !important;
    margin-left: 0px !important;
}
.nmlo {
    padding-bottom: 30px;
}
blockquote {
    width: 690px;
    padding: 0px 15px;
    margin: auto;
    float: none;
    margin-top: 50px;
    height: 385px
}
.regpgarrow img {
    top: 601px;
    left: 200px;
}
}
@media (max-width: 920px){
.regpgarrow img {
    top: 538px;
    left: 145px;
}
.content {
    padding: 2rem 0;
}
p.intp {
    line-height: 55px;
}
}
@media (max-width: 864px){
.regpgarrow img {
   top: 538px;
    left: 102px;
}

}
@media (max-width: 767px){
.regpgarrow img {
    top: 486px;
    left: 159px;
}
blockquote {
    width: 515px;
    height: 438px;
}
.fullw {
    width: 100%;
}
.box {
    padding: 35px 10px 10px 10px;
}
.bof {
    margin-top: 0px;
}
}
@media (max-width: 655px){
p.intp {
    font-size: 38px;
    line-height: 45px !important;
}
.regpgarrow img {
    top: 466px;
    left: 140px;
}
}
@media (max-width: 640px){
.regpgarrow img {
    top: 469px;
    left: 96px;
}
p.intp {
    font-size: 36px;
    line-height: 40px !important;
}
}
@media (max-width: 630px){
.regpgarrow img {
    top: 456px;
}
}
@media (max-width: 600px){
.regpgarrow img {
    top: 452px;
}
.nmlo {
    
    padding-bottom: 30px;
}
}
@media (max-width: 575px){
.col-md-6.byi {
    width: 85%;
    margin: auto;
}
.regpgarrow img {
    top: 471px;
}
blockquote {
    width: 375px;
    height: 480px;
}
.content {
    padding: 3rem 0;
}
}
@media (max-width: 567px){

}
@media (max-width: 555px){
.regpgarrow img {
    top: 469px;
}
}
@media (max-width: 534px){
.regpgarrow img {
    top: 454px;
}
}
@media (max-width: 515px){
.regpgarrow img {
    top: 453px;
}
}
@media (max-width: 500px){
p.intp {
    font-size: 28px;
    line-height: 33px !important;
}
.fullw {
    font-size: 16px !important;
}
.nmlo {
    padding-bottom: 15px;
}
.content {
    padding: 30px 0;
}
.box h3 {
    font-size: 18px !important;
    line-height: 26px;
}
.regpgarrow img {
    top: 372px;
}
}
@media (max-width: 500px){
.regpgarrow img {
    top: 397px;
}
blockquote {
    width: 380px;
}
div#radioContainer1 {
    margin-top: 0px;
    margin-bottom: 10px;
}
div#radioContainer2 {
    margin-top: 0px;
    margin-bottom: 10px;
}
}
@media (max-width: 472px){
.regpgarrow img {
    top: 393px;
    left: 65px;
}
}
@media (max-width: 456px){
.regpgarrow img {
    top: 390px;
}
}
@media (max-width: 444px){
.regpgarrow img {
    top: 430px;
}
}
@media (max-width: 435px){
.regpgarrow img {
    top: 388px;
}
}



blockquote {
    width: 355px;
}
}
@media (max-width: 383px){
.regpgarrow img {
    top: 347px;
}
}
  </style>

    <title>Contact Form #4</title>
    
  </head>
  
  <body>
  <!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-KP8FBM6L"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

          <header id="top">
            <div class="container rs">
                <div class="row bghc">
                    <div class="col-md-4 col-sm-12 tb">
                      <a href="https://www.krishani.com/LP/Custom-Silicone-Mold"><img src="img/logo-2.webp" alt="logo" style="margin-top:10px;background-color:#f5f6f7 !important;" class="img-responsive"></a>
                    </div>
                    
                    
                    <div class="col-md-8 col-sm-12 yu">
                        <div class="addressCon">
                         
                            <!-- <div class="col-md-4 col-sm-4 col-xs-4">
                               <h4 style="text-align: end;"><i class="fa fa-microphone fa-3x"></i></h4>
                            </div> -->
                            <!-- <div class="col-md-8 col-sm-8 col-xs-6"> -->
                               
                                <a class="bnnl" href="mailto:info@krishani.com"><img src="img/Group 122.png" class="img-maile"> info@krishani.com</a>
                                 <a class="bnnl" href="tel:+1(647)-294-5240"><img src="img/Group 47.png" class="img-phon"> +1 (647) 294-5240</a>
                           <!--  </div> -->
                          
                        
                           
                        
                           </div>
                           <div class="cxlk">
                                <a class="whatsapp-float t" data-toggle="modal" data-target="#myModal"><img class="rgy wimg" src="img/WhatsApp-Logo-Icon.png" alt="contact us whatsapp"></a>
                       
                               </div>
                      </div>
                </div>         
         
          
        </header>
	   <!--navigation-->
    
    
     <!--<div class="container-fluid position-relative p-0">
     <nav class="navbar navbar-expand-lg navbar-dark px-5 py-3 py-lg-0">
          <!--  <a href="index.html" class="navbar-brand p-0">
             <img src="https://www.thebusinessautomation.com/demo1/img/logo-2.webp" alt="logo" style="margin-top:10px;" class="img-responsive yu">
            </a>-->
            
            <!--<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
                <span class="fa fa-bars"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarCollapse">
                <div class="navbar-nav ms-auto py-0">
                    <a href="index.html" class="nav-item nav-link active">Home</a>
                     <a href="#whykrishani" class="nav-item nav-link">Why Choose Us</a>
                    <a href="#testimonial" class="nav-item nav-link">What Our Client Say</a>
                    <a href="#wordsfromceo" class="nav-item nav-link">Words From CEO</a>
                    
                   <!-- <div class="nav-item dropdown">
                        <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">Pages</a>
                        <div class="dropdown-menu m-0">
                            <a href="price.html" class="dropdown-item">Pricing Plan</a>
                            <a href="feature.html" class="dropdown-item">Our features</a>
                            <a href="team.html" class="dropdown-item">Team Members</a>
                            <a href="testimonial.html" class="dropdown-item">Testimonial</a>
                            <a href="quote.html" class="dropdown-item">Free Quote</a>
                        </div>
                    </div>-->
                </div>
                <!--<butaton type="button" class="btn text-primary ms-3" data-bs-toggle="modal" data-bs-target="#searchModal"><i class="fa fa-search"></i></butaton>
                
            </div>
        </nav>
        </div>-->
    <!-- Navbar & Carousel Start -->
    
        
     
  <div class="content">
    
    <div class="container">
        <div class="row">
            <div class="col-md-12 mr-auto nmlo">
                 
          <h3 class="mb-3 fullw-uio">Thank you for providing your information </h3>
          <p class="intp">Help Us To Understand Your Requirement</p>
          
          
        
                </div>
            </div>
            
      <div class="row">
      

        <div class="col-md-6 byi">
          <div class="box">
              <div class="regpgarrow"><img src="img/regpg-formarrow.jpg"></div>
            <h3 class="heading">SELECT The Type of Silicone Mold You Need</h3>
            <form class="mb-5" method="POST" id="contactForm" action="requirements.php" name="contactForm">
              <div class="row">
                
              
              </div>
              

                <div class="row mb-3">
                <div class="col-md-6 form-group mnk">
                  <!--<label for="budget" class="col-form-label">Food Grade</label>-->
                  
  
  
<!--  <label for="showOptions1" id="label1" style="color:black;">Food Grade</label>-->

<!--<button type="button" id="showOptions1" style=" cursor: pointer;" class="btnv btn-sm red" onclick="toggleRadioContainer('radioContainer1')">Food Grade</button>-->

<button type="button" id="showOptions1" style="cursor: pointer;" class="btnv btn-sm red" onclick="toggleRadioContainer('radioContainer1', 'radioContainer2')">Food Grade</button>

    <!-- Radio buttons for Food Grade section -->
    <!-- ... -->
        <div id="radioContainer1" class="hidden">
          
            <input type="radio" name="optionsfg" value="Muffin Molds" id="option1">
            <label for="option1" style="color:black;">Muffin Molds</label><br>
            <input type="radio" name="optionsfg" value="Cake Molds" id="option2">
            <label for="option2" style="color:black;">Cake Molds</label><br>
            
            <input type="radio" name="optionsfg" value="Candy Molds" id="option3">
            <label for="option3" style="color:black;">Candy Molds</label><br>
            
            <input type="radio" name="optionsfg" value="Chocolate Molds" id="option4">
            <label for="option4" style="color:black;">Chocolate Molds</label><br>
            
            <input type="radio" name="optionsfg" value="Cookie Molds" id="option5">
            <label for="option5" style="color:black;">Cookie Molds</label><br>
            
            <input type="radio" name="optionsfg" value="Butter Molds" id="option5">
            <label for="option5" style="color:black;">Butter Molds</label><br>
            
            <input type="radio" name="optionsfg" value="Ice-Cube Tray Molds" id="option5">
            <label for="option5" style="color:black;">Ice-Cube Tray Molds</label><br>
            
            <input type="radio" name="optionsfg" value="Ice-Cream  Molds" id="option5">
            <label for="option5" style="color:black;">Ice-Cream  Molds</label><br>
            
            <input type="radio" name="optionsfg" value="Bakery Molds" id="option5">
            <label for="option5" style="color:black;">Bakery Molds</label><br>
            
            <input type="radio" name="optionsfg" value="Popsicle Molds" id="option5">
            <label for="option5" style="color:black;">Popsicle Molds</label><br>
            
            <input type="radio" name="optionsfg" value="Cupcake Molds" id="option5">
            <label for="option5" style="color:black;">Cupcake Molds</label><br>
            
            <input type="radio" name="optionsfg" value="Lollipop Molds" id="option5">
            <label for="option5" style="color:black;">Lollipop Molds</label><br>
            
            
               <input type="radio" name="optionsfg" value="Others" id="option6" onclick="toggleTextbox1()">
            <label for="option6" style="color:black;">Others</label><br>
            <div id="textboxContainer1" class="hidden">
            <label for="foodOtherText" style="color:black;">Please specify:</label><br>
            <input type="text" id="foodOtherText" name="foodOtherText">
        </div>
        </div>
       
  
  
  
                </div>
                <div class="col-md-6 form-group mnk2">
                  <!--<label for="budget" class="col-form-label">Non-Food Grade</label>-->

  
  
  <!--<label for="showOptions2" id="label2" style="color:black;">Non Food Grade</label>-->
  <!--<button type="button" id="showOptions2" style="cursor: pointer;" class="btnv btn-sm red" onclick="toggleRadioContainer('radioContainer2')">Non Food Grade</button>-->
  
  
   <button type="button" id="showOptions2" style="cursor: pointer;" class="btnv btn-sm red" onclick="toggleRadioContainer('radioContainer2', 'radioContainer1')">Non Food Grade</button>

        <div id="radioContainer2" class="hidden">
            <input type="radio" name="optionsnfg" value="Soap Molds" id="option1">
            <label for="option1" style="color:black;">Soap Molds</label><br>
            <input type="radio" name="optionsnfg" value="Candle Molds" id="option2">
            <label for="option2" style="color:black;">Candle Molds</label><br>
            
              <input type="radio" name="optionsnfg" value="Others" id="option5" onclick="toggleTextbox2()">
            <label for="option5" style="color:black;">Others</label><br>
        <div id="textboxContainer2" class="hidden">
            <label for="nonFoodOtherText" style="color:black;">Please specify:</label><br>
            <input type="text" id="nonFoodOtherText" name="nonFoodOtherText">
        </div>
           
        </div>
 
  
  
  

<input type="hidden" id="" name="name" value="<?php echo $name; ?>">
<input type="hidden" id="" name="email"value="<?php echo $email; ?>">
<input type="hidden" id="" name="phone" value="<?php echo $phone; ?>">
<input type="hidden" id="" name="message" value="<?php echo $message; ?>">
               
                </div>
              </div>

           <div class="row">
                <div class="col-md-12 bof">
                  <input type="submit" name="submit" value="Let’s Move Further" class="btn btn-block btn-primary rounded-0 py-2 px-4">
                  <span class="submitting"></span>
                </div>
              </div>
            </form>

            <div id="form-message-warning mt-4"></div> 
            <div id="form-message-success">
              Your message was sent, thank you!
            </div>
          </div>
        </div>
        
          <div class="col-md-5 mr-auto">
         <blockquote>
  <span id="symbol">“</span>
  <p id="quote">We worked with Krishani for the first, and DEFINITELY not the last time. Their team was a huge help and took the time to walk me through different rubber and silicone materials and their benefits and suggested the grade best suited to my product. It was a new development and I am fully satisfied with the service and the product they developed. I couldn’t ask for more</p>
  <hr />
  <!--<img id="pfp" src="img/derek.webp">-->
  <div id="name">
      <span class="rxui">Clark Brewer</span>
      <span id="detail">CEO,Praters</span></div>
</blockquote>
          
          
        </div>
        
      </div>
  </div>
    
  </div>  
 <div class="slider">
  <div class="slide-track">
    <div class="slide">
      <img class="slideimg" src="img/90.png" alt="">
    </div>
    <div class="slide">
      <img class="slideimg" src="img/91.png" alt="">
    </div>
    <div class="slide">
      <img class="slideimg" src="img/92.png" alt="">
    </div>
    <div class="slide">
      <img class="slideimg" src="img/93.png" alt="">
    </div>
    <div class="slide">
      <img class="slideimg" src="img/94.png" alt="">
    </div>
    <div class="slide">
      <img class="slideimg" src="img/95.png" alt="">
    </div>
    <div class="slide">
      <img class="slideimg" src="img/96.png" alt="">
    </div>
    <div class="slide">
      <img class="slideimg" src="img/97.png" alt="">
    </div>
    <div class="slide">
      <img class="slideimg" src="img/98.png" alt="">
    </div>

    <div class="slide">
      <img class="slideimg" src="img/99.png" alt="">
    </div>
    <div class="slide">
      <img class="slideimg" src="img/100.png" alt="">
    </div>
    <div class="slide">
      <img class="slideimg" src="img/101.png" alt="">
    </div>
    <div class="slide">
      <img class="slideimg" src="img/102.png" alt="">
    </div>
    <div class="slide">
      <img class="slideimg" src="img/103.png" alt="">
    </div>
  
  </div>
</div>
<?php include('requirements-footer.php'); ?>
    
    <!-- Footer End -->

    <!-- Footer End -->
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery.validate.min.js"></script>
    <script src="js/main.js"></script>
    
 <script>
  
 <!-- function handleSelectChange(selectId) {
    var select = document.getElementById(selectId);
    var otherSelectId = (selectId === 'selectBox1') ? 'selectBox2' : 'selectBox1';
    var otherSelect = document.getElementById(otherSelectId);
    
    if (select.value !== 'default') {
        otherSelect.disabled = true;
        otherSelect.value = ''; // Set value to empty when disabling
    } else {
        otherSelect.disabled = false;
    }
}-->
function handleSelectChange(selectId) {
    var select = document.getElementById(selectId);
    var otherSelectId = (selectId === 'selectBox1') ? 'selectBox2' : 'selectBox1';
    var otherSelect = document.getElementById(otherSelectId);
    
    if (select.value !== 'default') {
        otherSelect.disabled = true;
    } else {
        otherSelect.disabled = false;
    }
}
</script>
<script>
document.addEventListener("DOMContentLoaded", function() {
    const label1 = document.getElementById("label1");
    const radioContainer1 = document.getElementById("radioContainer1");

    label1.addEventListener("click", function() {
        radioContainer1.classList.toggle("hidden");
        label1.classList.toggle("show-label");
    });

    const label2 = document.getElementById("label2");
    const radioContainer2 = document.getElementById("radioContainer2");

    label2.addEventListener("click", function() {
        radioContainer2.classList.toggle("hidden");
        label2.classList.toggle("show-label");
    });
});



</script>

<!--<script>
    function toggleRadioContainer(containerId) {
    $("#" + containerId).toggleClass('hidden');
  //  $("#" + buttonId).toggleClass('hidden');
}
</script>-->
<script>
    var activeContainerId = null;

    function toggleRadioContainer(containerToShow, containerToHide) {
        var containerToShowElem = document.getElementById(containerToShow);
        var containerToHideElem = document.getElementById(containerToHide);
        var radioInputsToDisable = containerToHideElem.querySelectorAll('input[type="radio"]');
        var radioInputsToEnable = containerToShowElem.querySelectorAll('input[type="radio"]');

        if (activeContainerId !== containerToShow) {
            // Hide the previously active container
            if (activeContainerId) {
                var activeContainer = document.getElementById(activeContainerId);
                activeContainer.classList.add('hidden');
            }

            // Show the selected container
            containerToShowElem.classList.remove('hidden');
            activeContainerId = containerToShow;

            // Enable radio inputs in the shown container
            radioInputsToEnable.forEach(function(radioInput) {
                radioInput.disabled = false;
            });

            // Disable radio inputs in the other container
            radioInputsToDisable.forEach(function(radioInput) {
                radioInput.checked = false;
                radioInput.disabled = true;
            });
        } else {
            // Hide the currently active container
            containerToShowElem.classList.add('hidden');
            activeContainerId = null;

            // Disable and clear radio inputs in the hidden container
            radioInputsToEnable.forEach(function(radioInput) {
                radioInput.checked = false;
                radioInput.disabled = true;
            });
        }
    }
</script>
<script>
function toggleTextbox1() {
    var radio1 = document.querySelector('input[name="optionsfg"]:checked');
    var textboxContainer1 = document.getElementById('textboxContainer1');
    var foodOtherText = document.getElementById('foodOtherText');

    if (radio1 && radio1.value === 'Others') {
        textboxContainer1.classList.remove('hidden');
    } else {
        textboxContainer1.classList.add('hidden');
        foodOtherText.value = ''; // Clear the text box value
    }
}

function toggleTextbox2() {
    var radio2 = document.querySelector('input[name="optionsnfg"]:checked');
    var textboxContainer2 = document.getElementById('textboxContainer2');
    var nonFoodOtherText = document.getElementById('nonFoodOtherText');

    if (radio2 && radio2.value === 'Others') {
        textboxContainer2.classList.remove('hidden');
    } else {
        textboxContainer2.classList.add('hidden');
        nonFoodOtherText.value = ''; // Clear the text box value
    }
}
</script>

  </body>
</html>