how i can do multi show hide in loop jquery

i am doing like page northguru.com

page name is packages

it has a javascript code which make like that :

we have div call it container included buttons all buttons when click show hidden div call it sub explain what they mean or have all sub div shows in the same  container

i did this all
2.jpg1.jpgthe problem is :

i have data repeated from sql good and sub data brings good but when press any button to show sub only the first container subs shows why ??
AHMED SAMYownerAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
@AHMED SAMY,

You will need to rephrase your question if you are hoping to get answers. As things stand we don't know what you are asking. You have not provided source code or a link and your description of your requirement is very vague.

Can I suggest that you break it down for us so that we know what you are asking.

1. If you can provide a link either to your code or a link where you have replicated the problem (jsFiddle / Plunkr)
2. Explain in point form what it is you are trying to do
3. Explain to us what is not working
4. Post source code relevant to the problem
5. If you are getting errors tell us what they are.

If you can provide us with good information we can help you - as it stands I am not sure you will get many responses as it is difficult to understand from your question what it is you are wanting to do.
AHMED SAMYownerAuthor Commented:
<script>
                            function show1(){
                                  document.getElementById('Quick View').style.display = 'block';
                                  document.getElementById('Download').style.display = 'none';
                                  document.getElementById('Customize').style.display = 'none';
                                  document.getElementById('Book').style.display = 'none';
                                  document.getElementById('Save').style.display = 'none';
                                  document.getElementById('Hotel').style.display = 'none';
                                  document.getElementById('Inclusion').style.display = 'none';
                                  document.getElementById('Cost').style.display = 'none';
                                }
                            function show2(){
                                  document.getElementById('Quick View').style.display = 'none';
                                  document.getElementById('Download').style.display = 'block';
                                  document.getElementById('Customize').style.display = 'none';
                                  document.getElementById('Book').style.display = 'none';
                                  document.getElementById('Save').style.display = 'none';
                                  document.getElementById('Hotel').style.display = 'none';
                                  document.getElementById('Inclusion').style.display = 'none';
                                  document.getElementById('Cost').style.display = 'none';
                                }
                            function show3(){
                                  document.getElementById('Quick View').style.display = 'none';
                                  document.getElementById('Download').style.display = 'none';
                                  document.getElementById('Customize').style.display = 'block';
                                  document.getElementById('Book').style.display = 'none';
                                  document.getElementById('Save').style.display = 'none';
                                  document.getElementById('Hotel').style.display = 'none';
                                  document.getElementById('Inclusion').style.display = 'none';
                                  document.getElementById('Cost').style.display = 'none';
                                }
                            function show4(){
                                  document.getElementById('Quick View').style.display = 'none';
                                  document.getElementById('Download').style.display = 'none';
                                  document.getElementById('Customize').style.display = 'none';
                                  document.getElementById('Book').style.display = 'block';
                                  document.getElementById('Save').style.display = 'none';
                                  document.getElementById('Hotel').style.display = 'none';
                                  document.getElementById('Inclusion').style.display = 'none';
                                  document.getElementById('Cost').style.display = 'none';
                                }
                            function show5(){
                                  document.getElementById('Quick View').style.display = 'none';
                                  document.getElementById('Download').style.display = 'none';
                                  document.getElementById('Customize').style.display = 'none';
                                  document.getElementById('Book').style.display = 'none';
                                  document.getElementById('Save').style.display = 'block';
                                  document.getElementById('Hotel').style.display = 'none';
                                  document.getElementById('Inclusion').style.display = 'none';
                                  document.getElementById('Cost').style.display = 'none';
                                }
                            function show6(){
                                  document.getElementById('Quick View').style.display = 'none';
                                  document.getElementById('Download').style.display = 'none';
                                  document.getElementById('Customize').style.display = 'none';
                                  document.getElementById('Book').style.display = 'none';
                                  document.getElementById('Save').style.display = 'none';
                                  document.getElementById('Hotel').style.display = 'block';
                                  document.getElementById('Inclusion').style.display = 'none';
                                  document.getElementById('Cost').style.display = 'none';
                                }
                            function show7(){
                                  document.getElementById('Quick View').style.display = 'none';
                                  document.getElementById('Download').style.display = 'none';
                                  document.getElementById('Customize').style.display = 'none';
                                  document.getElementById('Book').style.display = 'none';
                                  document.getElementById('Save').style.display = 'none';
                                  document.getElementById('Hotel').style.display = 'none';
                                  document.getElementById('Inclusion').style.display = 'block';
                                  document.getElementById('Cost').style.display = 'none';
                                }
                            function show8(){
                                  document.getElementById('Quick View').style.display = 'none';
                                  document.getElementById('Download').style.display = 'none';
                                  document.getElementById('Customize').style.display = 'none';
                                  document.getElementById('Book').style.display = 'none';
                                  document.getElementById('Save').style.display = 'none';
                                  document.getElementById('Hotel').style.display = 'none';
                                  document.getElementById('Inclusion').style.display = 'none';
                                  document.getElementById('Cost').style.display = 'block';
                                }
                            </script>

Open in new window

AHMED SAMYownerAuthor Commented:
<input type="button" class="btn btn-primary" name="tab" value="Quick View" onClick="show1()" style="margin-top:15px; width:200px;">
                            <input type="button" class="btn btn-primary" name="tab" value="Download" onClick="show2()" style="margin-top:15px; width:200px;">
                            <input type="button" class="btn btn-primary" name="tab" value="Customize" onClick="show3()" style="margin-top:15px; width:200px;">
                            <input type="button" class="btn btn-primary" name="tab" value="Book" onClick="show4()" style="margin-top:15px; width:200px;">
                            <input type="button" class="btn btn-primary" name="tab" value="Save" onClick="show5()" style="margin-top:15px; width:200px;">

Open in new window

Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

AHMED SAMYownerAuthor Commented:
<div id="Book" class="hide breadcrumb row">
                           
                    </div>
                    <div id="Quick View" class="hide">
                              
                            </div>
                    <div id="Download" class="hide breadcrumb">
                           
                            </div>
                    <div id="Customize" class="hide breadcrumb">
                           
                                 </div>
                    <div id="Hotel" class="hide">
                           
                            </div>
                    <div id="Inclusion" class="hide">
                            
                            </div>
                    <div id="Cost" class="hide">
            			</div>

Open in new window

AHMED SAMYownerAuthor Commented:
all works good.

  when you see in the first and second image i have right side buttons all of them shows div using java code .

when loop this divs you can see ---- in above for example   " manali" package this is container---  all sub divs included and shows in the same container when you click download or save or book button

on my case in any package click download or save or book only shows sub divs on the first package only

thats good??
AHMED SAMYownerAuthor Commented:
can i include video??
AHMED SAMYownerAuthor Commented:
AHMED SAMYownerAuthor Commented:
i can upload videos on outside server link here to show you the problem
Julian HansenCommented:
Ok that is a bit better - I am still not clear on what your questions is but I can see a way to make your code a lot more streamlined. By adding a class to your buttons and a custom id attribute you only need one function to toggle your tabs.

I am curious  though - you appear to be using Bootstrap already why don't you just use the Tabs they provide
https://getbootstrap.com/docs/3.3/javascript/#tabs

Here is your code re-written to use jQuery and a single event function based on class
CSS
.myButton {
  margin-top: 15px;
  width: 200px;
}
.myDiv {
  display: none;
}

Open in new window

HTML
<input type="button" class="btn btn-primary myButton" name="tab" data-id="Book" value="Quick View">
<input type="button" class="btn btn-primary myButton" name="tab" data-id="Download" value="Download">
<input type="button" class="btn btn-primary myButton" name="tab" data-id="Customize" value="Customize">
<input type="button" class="btn btn-primary myButton" name="tab" data-id="Book" value="Book">
<input type="button" class="btn btn-primary myButton" name="tab" data-id="Save" value="Save">

<div id="Book" class="myDiv breadcrumb row">Book</div>
<div id="Quick View" class="myDiv">Quick View</div>
<div id="Download" class="myDiv  breadcrumb">Download</div>
<div id="Customize" class="myDiv  breadcrumb">Customize</div>
<div id="Hotel" class="myDiv">Hotel</div>
<div id="Inclusion" class="myDiv">Inclusion</div>
<div id="Cost" class="myDiv">myDiv</div>

Open in new window


jQuery
<script>
$(function() {
  $('.myButton').click(function(e) {
    e.preventDefault();
    var trgt = $(this).data('id');
    if ($('#' + trgt).is(':visible')) $('#' + trgt).hide();
    else {
      $('.myDiv').hide();
      $('#' + trgt).show();
    }
  });
});
</script>

Open in new window

Working sample here


On to your specific code

when you see in the first and second image i have right side buttons all of them shows div using java code .
What image are you referring to - there are no images in the source you posted
AHMED SAMYownerAuthor Commented:
no problem that is good idea i can use it, suppose it is in a div which will be repeated as count as query from database it will work on all div good

sure that is my problem when retrieve data and repeat div which include this all buttons and sub divs
AHMED SAMYownerAuthor Commented:
by the way this is a link to my video

https://we.tl/2wNEUmAlbg
Julian HansenCommented:
From what I can tell your code for switching Div's (buttons on the right and tabs on the top) are only working against the content of the first package - instead of showing the content for the package that is represented in the container.

To understand why it is not doing what you want we need to see more code - preferably a working link.
AHMED SAMYownerAuthor Commented:
    
<form action="<?php echo $PHP_SELF; ?>" method="post">    
<div class="container">
        
      <!-- Page Heading/Breadcrumbs -->
	<div class="row">
		<div class="col-lg-12">
    <div class="float-left"><h3 class="mt-3 mb-3" style="color:#F00"><a href="#"></a></h3></div>
	<div class="float-right"><h3 class="mt-3 mb-3" style="color:#F00">099999 999 099</h3>
    		last update : 10/10/2017
    </div>
    	</div>
    </div>
	<div class="mb-4" id="accordion" role="tablist" aria-multiselectable="true">
		<div class="breadcrumb" style="text-align:center; color:#F00">
		<br>
		<br>
			<div class="row">
                    <div class="col-lg-4 col-sm-4 mb-4">
                        
                        <label for="Travel Month"><strong>Travel Month</strong></label>
                        <br>
                        <style>
                        #duration{width:200px;}
                        </style>
                        <select id="Travel Month" class="form-control" style="width:250px;">
                        <?php
                            $test_pack=" SELECT COUNT( * ) AS `Rows` , `valid_date` FROM `packages`GROUP BY `valid_date` ORDER BY `valid_date` LIMIT 0 , 30  ";
							$test_query=mysqli_query($connect,$test_pack);
							
							while($test_result=mysqli_fetch_array($test_query)){
						?>
								<option><?php echo $test_result['valid_date']; ?></option>
                        <?php
							}
						?>
                        </select>
                    </div>
                    <div class="col-lg-4 col-md-4 mb-4">
                      <label for="Trip Duration"><strong>Trip Duration</strong></label>
                        <br>
                        <select id="Trip Duration" class="form-control" style="width:250px;">
                        <?php
                            $test_trip="SELECT * FROM trip ";
							$test_query=mysqli_query($connect,$test_trip);
							
							while($test_result=mysqli_fetch_array($test_query)){
								$tr_id=$test_result['trip_id'];
						?>
								<option><?php echo $test_result['trip_name']; ?></option>
                        <?php
							}
						?>
                        </select>
                    </div>
                    <div class="col-lg-4 col-md-4 mb-4">
                      	<style>
						.hide {
							  display: none;
							}
							p {
							  font-weight: bold;
							}
						</style>
                        <script>
							function show22(){
							  document.getElementById('cites').style.display = 'block';
							  document.getElementById('themes').style.display = 'none';
							}
							function show33(){
							  document.getElementById('cites').style.display = 'none';
							  document.getElementById('themes').style.display = 'block';
							}
						</script>
                        <input type="radio" name="tab" value="cites" onclick="show22();" />
                        cites
                        <input type="radio" name="tab" value="themes" onclick="show33();" />
                        themes
                        <div id="cites" class="show">
                        <input id="autocomplete1" class="form-control" name="cites" placeholder="cites">
							<script src="js/jquery.js"></script>
                            <script src="js/jquery-ui.js"></script>
                            <script>
                                $( "#autocomplete1" ).autocomplete({
                                    source: ["El Gouna","Sharm El Sheikh","Hurghada","Marsa Alam","Il Cairo","Luxor","Assuan","Abu Simbel","Alexandria","Alamein","Safaga","Abidos","Abu Dabbab","Abu Redis","Assiut","Balat","Budkhola","Dairiut","Damietta","Dendera","Edfu","El Arish","Esna","Hamata","Ismailia","Komombo","L'Oasi di Bahareia","L'Oasi di Baris","L'Oasi di Dakhal","L'Oasi di Kharga","Makadi Bay","Malawi","Marsa Matrouh","Menia","Montagna del Galalah","Mout Naga Hammadi","Port Said","Porto Ghaleb","Quena","Rafah","Ras Ghalaeb","Rashid","Sharkeia","Sokhna","Suez","Tenida","Wadi El Natroun","Zaffarana" ]
                                });
                            </script>
                        </div>
                        <div id="themes" class="hide">
                        <input id="autocomplete2" class="form-control" name="themes" placeholder="Tema">
							<script src="js/jquery.js"></script>
                            <script src="js/jquery-ui.js"></script>
                            <script>
                                $( "#autocomplete2" ).autocomplete({
                                    source: ["Mare e Benessere","Luxory","Gruppi e Incentivi","Eco-Tourism","Turismo Storico Culturale","Il Turismo Industriale","Avventure","Trekking per lunghe distanze","Turismo medico","Safari Nel deserto","Viaggio last-minute","Disintossicarsi dalla tecnologia","Snorkeling o immersioni","Una crociera lungo un fiume","Viaggi Religosi","Caccia e Pesca","Viaggi per Affari","Viaggi insoliti","Viaggi Studi","Viaggi di Nozzie","Viaggi sportivi"]
                                });
                            </script>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-4 mb-4">
                      <label for="Hotel Categories"><strong>Hotel Categories</strong></label>
                        <br>
                        <select id="Hotel Categories" class="form-control" style="width:250px;">
                        <?php
							$sqlhotel="SELECT * FROM hotels ";
							$queryhotel=mysqli_query($connect,$sqlhotel);
							while($resulthotel=mysqli_fetch_array($queryhotel)){
						?>
                        <option value="<?php echo $resulthotel['hotel_name'];?>"><?php echo $resulthotel['hotel_name'];?>&nbsp;(&nbsp;<?php echo $resulthotel['Rating'];?>&nbsp;)</option>
						<?php
							}
						?>
                        </select>
                    </div>
					<div class="col-lg-2 col-md-4 mb-4">
										NO. Of Rooms:
                                        <select class="form-control" style="width:70px;">
                                        <option>0</option>
                                        <option>1</option>
                                        <option>2</option>
                                        <option>3</option>
                                        <option>4</option>
                                        <option>5</option>
                                        <option>6</option>
                                        </select>
					</div>
					<script>
							$(document).ready(function(){
								$("#sadults").change(function () {
									if ($(this).val() == "4") {
										$("#child").hide();
										$("#childage").hide();
									} else {
										$("#child").show();
										$("#childage").show();
									}
								});
							});
					</script>
                    <div class="col-lg-2 col-md-4 mb-4">
										NO. Of Adults:
                                        <select class="form-control" style="width:70px;" id="sadults">
                                        <option value="0">0</option>
                                        <option value="1">1</option>
                                        <option value="2">2</option>
                                        <option value="3">3</option>
										<option value="4">4</option>
                                        </select>
					</div>
					<div class="col-lg-2 col-md-4 mb-4" id="child" style="display:none;">
                                    	NO. Of Children:
                                        <select class="form-control" style="width:70px;" >
                                        <option>0</option>
                                        <option>1</option>
                                        <option>2</option>
                                        </select>
					</div>
                    <div class="col-lg-2 col-md-4 mb-4" id="childage" style="display:none;">
										Age Of Childern:
                                        <select class="form-control" style="width:70px;" >
                                        <option>0</option>
                                        <option>1</option>
                                        <option>2</option>
                                        <option>3</option>
                                        <option>4</option>
                                        <option>5</option>
                                        <option>6</option>
										<option>7</option>
                                        <option>8</option>
                                        <option>9</option>
                                        <option>10</option>
                                        </select>
                    </div>
                    <div class="col-lg-4 col-md-4 mb-4">
                      <input type="submit" class="btn btn-primary" name="Modify Search" value="Modify Search"
                      style="padding:15px; margin-top:20px; width:200px;">
                    </div>
			</div>
		</div>
		<br>
        <script>
			$(document).ready(function(){
				$("#sadults").change(function () {
					if ($(this).val() == "4") {
						$("#child").hide();
						$("#childage").hide();
					} else {
						$("#child").show();
						$("#childage").show();
					}
				});
			});
		</script>
        <div class="row">
        	<div class="col-lg-12">
            <?php 
			$sqlcount="SELECT COUNT(package_name)FROM packages";
			$querycount=mysqli_query($connect,$sqlcount);
			$resultcount=mysqli_fetch_array($querycount);
			?>
        		<div class="float-left">Packages Found : <span style="color:red"><?php echo $resultcount['COUNT(package_name)']; ?></span></div>
        		<div class="float-right" style="display:inline">
                        <style>
                        #duration{width:200px;}
                        </style>
						<script>
							$(document).ready(function(){
								$("#SortBy").change(function () {
									if ($(this).val() == "1") {
										$("#first").show();
										$("#second").hide();
									} else {
										$("#first").hide();
										$("#second").show();
										
									}
								});
							});
						</script>
                        Sort By : 
                        <select id="Sort By" class="form-control" style="width:250px;">
                        <option>Select One</option>
                        <option>Star Rating (1-5)</option>
                        <option>Star Rating (5-1)</option>
                        </select>
        		</div>
			</div>
        </div>
		<br>
        <br>
		<!-- Blog Post -->
		<?php
			$sqlpackages="SELECT * FROM packages ORDER BY Package_Price ASC ";
			$querypackages=mysqli_query($connect,$sqlpackages);
			while($resultpackages=mysqli_fetch_array($querypackages)){
		?>
		<div class="card mb-4">
            
            <div class="card-header">
            
            <h5 class="float-left"><?php echo $resultpackages['package_name']; ?> &nbsp;&nbsp;&nbsp;&nbsp;<a href="ViewDetails.php?id=<?php echo $resultpackages['package_id']; ?>">View Details</a></h5>
            <h5 class="float-right">package ID : <span style="color:red"><?php echo $resultpackages['package_id']; ?></span></h5>
            </div>
            <div class="card-body">
				
				<div class="row">
                    <div class="col-lg-2">
                      <a href="#">
                        <?php
					$pac_name=$resultpackages['package_id'];
					$sqlimg="SELECT content FROM packages_image WHERE packageID='$pac_name' LIMIT 1";
					$queryimg=mysqli_query($connect,$sqlimg);
					while($resultimg=mysqli_fetch_array($queryimg)){
						echo '<a href="#"><img src="data:image/jpeg;base64,'.base64_encode( $resultimg['content'] ).'" width="140px" height="140px"/></a>';
					}
						?>
                      </a>
                    </div>
                    <!-- tour advantages -->
                    <div class="col-lg-7">
                     <h3 class="breadcrumb" style="color:#C00; text-align:center"><?php echo $resultpackages['Package_Price']; ?> euro.&nbsp;</h3>
                     <ul class="float-left">
                     <li class="float-left list-group" style="padding-left:15px;"><?php echo $resultpackages['HName1']; ?></li>
                     <li class="float-left list-group" style="padding-left:15px;"><?php echo $resultpackages['HName2']; ?></li>
                     <li class="float-left list-group" style="padding-left:15px;"><?php echo $resultpackages['Car_Used']; ?></li>
                     <li class="float-left list-group" style="padding-left:15px;"><?php echo $resultpackages['meal1']; ?></li>
                     <li class="float-left list-group" style="padding-left:15px;"><?php echo $resultpackages['meal2']; ?></li>
                     </ul>
                      <br><br><br>
                      
                      <ul class="float-left">
                        <li class="float-left list-group" style="padding-left:15px;"><a style=" color:#009; text-decoration:underline" onClick="show1()">overview</a></li>
                        <li class="float-left list-group" style="padding-left:15px;"><a style=" color:#009; text-decoration:underline" onClick="show6()">hotel</a></li>
                        <li class="float-left list-group" style="padding-left:15px;"><a style=" color:#009; text-decoration:underline" onClick="show7()">inclusion</a></li>
                        <li class="float-left list-group" style="padding-left:15px;"><a style=" color:#009; text-decoration:underline" onClick="show8()">cost</a></li>
                      </ul>
                    </div>
                    <!-- menu right -->
                    <div class="list-group">
                            <style type="text/css">
							.myButton {
							  margin-top: 15px;
							  width: 200px;
							}
							.myDiv {
							  display: none;
							}
							</style>
                           
						   <script>
							$(function() {
							  $('.myButton').click(function(e) {
								e.preventDefault();
								var trgt = $(this).data('id');
								if ($('#' + trgt).is(':visible')) $('#' + trgt).hide();
								else {
								  $('.myDiv').hide();
								  $('#' + trgt).show();
								}
							  });
							});
							</script>
<input type="button" class="btn btn-primary myButton" name="tab" data-id="Book" value="Quick View">
<input type="button" class="btn btn-primary myButton" name="tab" data-id="Download" value="Download">
<input type="button" class="btn btn-primary myButton" name="tab" data-id="Customize" value="Customize">
<input type="button" class="btn btn-primary myButton" name="tab" data-id="Book" value="Book">
<input type="button" class="btn btn-primary myButton" name="tab" data-id="Save" value="Save">
                            
                        </div>
				</div>
					<div id="Book" class="myDiv breadcrumb row">
                                <div class="row">
                                        <div class="col-lg-3 col-sm-4 mb-4">
                                            <label for="datepicker"><strong>Start date</strong></label>
                                            <br>
                                            <input id="datepicker" class="form-control">
                                            <script src="js/jquery.js"></script>
                                            <script src="js/jquery-ui.js"></script>
                                            <script>
                                                $( "#datepicker" ).datepicker();
                                            </script>
                                        </div>
                                        <div class="col-lg-2 col-md-4 mb-4">
                                          <label for="Trip Duration"><strong>Trip Duration</strong></label>
                                            <br>
                                            <?php echo $resultpackages['package_id']; ?>
                                        </div>
                                        <div class="col-lg-2 col-md-4 mb-4">
                                          <label for="Hotel"><strong>Hotel</strong></label>
                                            <br>
                                            <?php echo $resultpackages['HName1']; ?>
                                        </div>
                                        <div class="col-lg-2 col-md-4 mb-4">
                                          <label for="meal plan"><strong>meal plan</strong></label>
                                            <br>
                                            <?php echo $resultpackages['meal1']; ?>
                                        </div>
                                        <div class="col-lg-2 col-md-4 mb-4">
                                          <label for="car used"><strong>car used</strong></label>
                                            <br>
                                            <?php echo $resultpackages['Car_Used']; ?>
                                        </div>
                                        <div class="col-lg-2 col-md-4 mb-4">
                                          <label for="clientname"><strong>client name</strong></label>
                                            <br>
                                          <input type="text" class="form-control" name="clientname">
                                        </div>
                                        <div class="col-lg-2 col-md-4 mb-4">
                                            <h6>NO. Of Rooms:</h6>
                                            <select class="form-control" style="width:70px;">
                                            <option>0</option>
                                            <option>1</option>
                                            <option>2</option>
                                            <option>3</option>
                                            <option>4</option>
                                            <option>5</option>
                                            <option>6</option>
                                            </select>
                                        </div>
                                        <script>
												$(document).ready(function(){
													$("#sadults").change(function () {
														if ($(this).val() == "4") {
															$("#child").hide();
															$("#childage").hide();
														} else {
															$("#child").show();
															$("#childage").show();
														}
													});
												});
										</script>
                                        <div class="col-lg-2 col-md-4 mb-4">
                                            <h6>NO. Of Adults:</h6>
                                            <select class="form-control" style="width:70px;" id="sadults">
                                            <option>0</option>
                                            <option>1</option>
                                            <option>2</option>
                                            <option>3</option>
                                            <option>4</option>
                                            </select>
                                        </div>
                                        <div class="col-lg-2 col-md-4 mb-4" id="child" style="display:none;">
                                            <h6>NO. Of Children:</h6>
                                            <select class="form-control" style="width:70px;">
                                            <option>0</option>
                                            <option>1</option>
                                            <option>2</option>
                                            <option>3</option>
                                            </select>
                                        </div>
                                        <div class="col-lg-3 col-md-4 mb-4" id="childage" style="display:none";>
                                            <h6>Age Of Childern:</h6>
                                            <select class="form-control" style="width:70px;">
                                            <option>0</option>
                                            <option>1</option>
                                            <option>2</option>
                                            <option>3</option>
                                            <option>4</option>
                                            <option>5</option>
                                            <option>6</option>
                                            <option>6</option>
                                            <option>7</option>
                                            <option>8</option>
                                            <option>9</option>
                                            <option>10</option>
                                            </select>
                                        </div>
                                        <div class="col-lg-4 col-md-4 mb-4">
                                            <h6>Comment :</h6>
                                            <textarea id="mytextarea" style="width:250px;">please write here....</textarea>
                                        </div>
                                        <div class="col-lg-4 col-md-4 mb-4">
                                          <input type="button" class="btn btn-primary" name="Modify Search" value="submit" style="padding:15px; margin-top:20px; width:200px;">
                                        </div>
                                </div>
                    </div>
                    <div id="Quick View" class="myDiv">
                                <div class="breadcrumb">
                                    <p><?php echo $resultpackages['Detailed_Itinerary']; ?></p>                            
                                </div>
                            </div>
                    <div id="Download" class="myDiv breadcrumb">
                            <div class="col-lg-12">
                            <p style="color:#F00">We suggest you to set the standard markup for higher maturity level.</p>
                                <div class="float-left col-lg-6">
                                    client name : 
                                    <input type="text" placeholder="client name" class="form-control" style="width:200px;">
                                    <br>
                                    Download type : 
                                    <select id="download" class="form-control" style="width:200px;">
                                        <option>Word</option>
                                        <option>PDF</option>
                                        <option>Email</option>
                                    </select>
                                    <br>
                                    Your Markup : 
                                    <input type="text" name="markup" placeholder="10" class="form-control" style="width:200px;">
                                    <input type="button" class="btn btn-primary" name="Download itinerary" value="Download itinerary" style="padding:15px; margin-top:20px; width:200px;">
                                </div>
                                <div class="float-right col-lg-6">
                                    <div class="breadcrumb">
                                            <p class="table-primary">net price</p>
                                            <p>dsds</p>
                                            <p>dsds</p>
                                    </div>
                                    <div class="breadcrumb">
                                            <p class="table-primary">your selling price</p>
                                            <p>dsds</p>
                                            <p>dsds</p>
                                    </div>
                                </div>
                            </div>	
                            </div>
                    <div id="Customize" class="myDiv breadcrumb">
                                <span style="color:#F00">CHANGE ITINERARY</span>
                                <br>
                                <div class="row">
                                <div class="col-lg-3 col-sm-4 mb-4">
                                <h6>DATE OF TRAVEL</h6>
                                <input id="datepicker" class="form-control" style="width:200px" name="datepicker">
                                            <script src="js/jquery.js"></script>
                                            <script src="js/jquery-ui.js"></script>
                                            <script>
                                                $( "#datepicker" ).datepicker();
                                            </script>
                                </div>
                                <div class="col-lg-3 col-sm-4 mb-4">
                                <h6>TRIP DURATION</h6>
                                <select id="Trip Duration" class="form-control" style="width:100px;" name="Duration">
                                <?php
                                    $test_trip="SELECT * FROM trip ";
                                    $test_query=mysqli_query($connect,$test_trip);
                                                
                                    while($test_result=mysqli_fetch_array($test_query)){
                                    $tr_id=$test_result['trip_id'];
                                ?>
                                   <option><?php echo $test_result['trip_name']; ?></option>
                                <?php
                                    }
                                ?>
                                </select>
                                </div>
                                <div class="col-lg-2 col-md-4 mb-4">
                                            <h6>NO. Of Rooms:</h6>
                                            <select class="form-control" style="width:70px;" name="rooms">
                                            <option value="1">1</option>
                                            <option value="2">2</option>
                                            <option value="3">3</option>
                                            <option value="4">4</option>
                                            <option value="5">5</option>
                                            <option value="6">6</option>
                                            </select>
                                </div>
                                <script>
												$(document).ready(function(){
													$("#sadults").change(function () {
														if ($(this).val() == "4") {
															$("#child").hide();
															$("#childage").hide();
														} else {
															$("#child").show();
															$("#childage").show();
														}
													});
												});
										</script>
                                <div class="col-lg-2 col-md-4 mb-4">
                                            <h6>NO. Of Adults:</h6>
                                            <select class="form-control" style="width:70px;" id="sadults" name="Adults">
                                            <option value="1">1</option>
                                            <option value="2">2</option>
                                            <option value="3">3</option>
                                            <option value="4">4</option>
                                            </select>
                                        </div>
                                        <div class="col-lg-2 col-md-4 mb-4" id="child" style="display:none;">
                                            <h6>NO. Of Children:</h6>
                                            <select class="form-control" style="width:70px;" name="children">
                                            <option value="0">0</option>
                                            <option value="1">1</option>
                                            <option value="2">2</option>
                                            <option value="3">3</option>
                                            </select>
                                        </div>
                                        <div class="col-lg-3 col-md-4 mb-4" id="childage" style="display:none";>
                                            <h6>Age Of Childern:</h6>
                                            <select class="form-control" style="width:70px;" name="agechildren">
                                            <option value="0">0</option>
                                            <option value="1">1</option>
                                            <option value="2">2</option>
                                            <option value="3">3</option>
                                            <option value="4">4</option>
                                            <option value="5">5</option>
                                            <option value="6">6</option>
                                            <option value="7">7</option>
                                            <option value="8">8</option>
                                            <option value="9">9</option>
                                            <option value="10">10</option>
                                            </select>
                                        </div>
                                <div class="col-lg-3 col-sm-4 mb-4">
                                <h6>CAR USED</h6>
                                <select class="form-control" style="width:100px" name="carused">
                                    <?php
                                      $sqlcars="SELECT * FROM cars";
                                      $querycars=mysqli_query($connect,$sqlcars);
                                      while($resultcars=mysqli_fetch_array($querycars)){
                                    ?>
                                      <option value="<?php echo $resultcars['car_name'];?>"><?php echo $resultcars['car_name'];?></option>
                                    <?php
                                      }
                                    ?>
                                </select>
                                </div>
                                <div class="col-lg-3 col-sm-4 mb-4">
                                <h6>MEAL PLAN</h6>
                                <select class="form-control" name="meal" id="meal" style="width:100px" name="mealplan">
									<option value="">select</option>
									<option value="Breakfast">Breakfast</option>
									<option value="Breakfast/Dinner">Breakfast/Dinner</option>
									<option value="Breakfast/Lunch/Dinner">Breakfast/Lunch/Dinner</option>
									<option value="Soft All Inclusive">Soft All Inclusive</option>
									<option value="All Inclusive">All Inclusive</option>
								</select>
                                </div>
                                <div class="col-lg-3 col-md-4 mb-4">
                                    <label for="clientname"><h6>client name</h6></label>
                                    <br>
                                    <input type="text" class="form-control" name="clientname">
                                </div>
                                <div class="col-lg-3 col-sm-4 mb-4">
                                <h6>HOTEL CATEGORY</h6>
                                <select id="Hotel Categories" class="form-control" style="width:100px;" name="category">
								<?php
                                $sqlhotel="SELECT * FROM hotels ";
                                $queryhotel=mysqli_query($connect,$sqlhotel);
                                while($resulthotel=mysqli_fetch_array($queryhotel)){                
                                ?>
                                <option value="<?php echo $resulthotel['hotel_name'];?>"><?php echo $resulthotel['hotel_name'];?>&nbsp;(&nbsp;<?php echo $resulthotel['Rating'];?>&nbsp;)</option>
                                <?php
                                   }
                                ?>
                                </select>			
                                </div>
                                <div class="col-lg-4 col-md-4 mb-4">
                                    <h6>Comment :</h6>
                                    <textarea id="mytextarea" class="form-control" name="Comment" style="width:250px;">please write here....</textarea>
                                </div>
                                <div class="col-lg-4 col-md-4 mb-4">
                                    <input type="submit" class="btn btn-primary" name="Modify" value="Modify Search" style="padding:15px; margin-top:20px; width:200px;">
                                </div>
                                </div>
                            </div>
                    <div id="Save" class="col-lg-12 myDiv breadcrumb">
                    <p style="color:#F00">We suggest you to set the standard markup for higher maturity level.</p>
                                <div class="float-left col-lg-6">
                                    client name : 
                                    <input type="text" placeholder="client name" class="form-control" style="width:200px;">
                                    <br>
                                    Your Markup : 
                                    <input type="text" name="markup" placeholder="10" class="form-control" style="width:200px;">
                                    <div class="col-lg-4 col-md-4 mb-4">
                                          <input type="button" class="btn btn-primary" name="save in favourite" value="save in favourite" style="padding:15px; margin-top:20px; width:200px;">
                                        </div>
                                <div class="float-right col-lg-6">
                                    <div class="breadcrumb">
                                            <p>dsdsdsd</p>
                                            <p>dsds</p>
                                            <p>dsds</p>
                                    </div>
                                    <div class="breadcrumb">
                                            <p>dsdsdsd</p>
                                            <p>dsds</p>
                                            <p>dsds</p>
                                    </div>
                                </div>
                            </div>
                            </div>
                    <div id="Hotel" class="myDiv">
                            <table class="breadcrumb table">
                            <thead>
							<th>Hotel</th>
							<th>Hotel Name</th>
							<th>Hotel Description</th>
							</thead>
							<?php
								$name1=$resultpackages['HName1'];
								$name2=$resultpackages['HName2'];
								$name3=$resultpackages['HName3'];
								$name4=$resultpackages['HName4'];
								$name5=$resultpackages['HName5'];
								$sqlhot="SELECT * FROM hotels WHERE hotel_name='$name1' OR hotel_name='$name2' OR hotel_name='$name3' OR hotel_name='$name4' OR hotel_name='$name5' ";
								$queryhot=mysqli_query($connect,$sqlhot);
								while($resulthot=mysqli_fetch_array($queryhot)){
								
							?>
							<tr class="table-primary">
                            <td><?php echo '<img src="data:image/jpeg;base64,'.base64_encode($resulthot['hotel_img_content']).'" width="50px" height="50px"/>'; ?></td>
                            <td><?php echo $resulthot['hotel_name']; ?></td>
                            <td><?php echo $resulthot['Description']; ?></td>
                            </tr>
							<?php
							}
							?>
						</table>
                            </div>
                    <div id="Inclusion" class="myDiv">
                            <p><?php echo $resulthot['Description']; ?></p>
                    </div>
                    <div id="Cost" class="myDiv">
               				<table class="breadcrumb table">
                                <tr class="table-sm table-primary">
                                <td>No. Of Pax</td>
                                <td>Count</td>
                                <td>Pax Price</td>
                                <td>Total Price</td>
                                </tr>
                                <tr class="table-sm">
                                <td>1</td>
                                <td>1</td>
                                <td><?php echo $resulthot['Package_Price']; ?></td>
                                <td><?php echo $resulthot['Package_Price']; ?></td>
                                </tr>
                                <tr class="table-sm">
                                <td></td>
                                <td></td>
                                <td style="background-color:#F90"><strong>Total Package Price</strong></td>
                                <td style="background-color:#F90"><strong><?php echo $resulthot['Package_Price']; ?></strong></td>
                                </tr>
                                <tr class="table-sm">
                                <td></td>
                                <td></td>
                                <td></td>
                                <td>* inclusive of all taxes </td>
                                </tr>
                            </table>
            			</div>
            </div>
        </div>
					
        <?php
			}
		?>
        			
                   
	</div>
</div>
</form>  

Open in new window

AHMED SAMYownerAuthor Commented:
for privcy i can't put link here
Julian HansenCommented:
Unfortunately without a working codebase it is going to be very difficult to help you.
The code you posted is non-functional - I suspect I am missing a CSS file and possibly some script.

NOTE: You are including jquery and jquery-ui multiple times in your document. Don't do that - move them either into your head or just before the closing <body> tag.
Given the way you have your script mixed up in your code (also not a good practice) putting your script defs in the head is a better option.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
SQL

From novice to tech pro — start learning today.