<div class="scrolling-wrapper">
	<div id="panel1" class="card">
		<div class="cart-items-head">
      <div class="row">
        <div class="col-xs-7">Your Items</div>
        <div class="col-xs-2 text-right">Quantity</div>
        <div class="col-xs-2 text-right">Price</div>
       </div>
		</div>
		<div class="cart-items">
		</div>
		<div class="">
			<table class="tbl-items table-bordered">
				<tbody></tbody>
			</table>
		</div>
		<div class="row">
			<div class="col-xs-12">
				<button id="to-checkout" type="button" class="btn btn-success">PROCEED TO CHECKOUT</button>
			</div>
		</div>
	</div>
	<div id="panel2" class="card">
		<div class="order-wrap">
			<div>
				<div class="heading-order">
					Shipping Address
				</div>
				<div class="address">
					<div class="form-group">
						<label>Full Name</label>
						<input type="text" class="form-control" value="John Doe" disabled>
					</div>
					<div class="form-group">
						<label>Address</label>
						<input type="text" class="form-control" value="Main Street 52" disabled>
					</div>
					<div class="form-group">
						<label>City</label>
						<input type="text" class="form-control" value="London" disabled>
					</div>
				</div>
				<div class="heading-order">
					Payment Method
				</div>
				<div class="radio-wrap">
					<div>
						<input type="radio" checked> Credit Card
						<img src="http://clients.cylindo.com/Viewer/3.x/latest/documentation/img/creditcard.gif" alt="">
					</div>
				</div>
			</div>
			<br>
			<button id="place-order" type="button" class="btn btn-success">PLACE MY ORDER</button>
		</div>
	</div>
	<div id="panel3" class="card">
		<div class="order-thanks">Thank you for your order. <span>Your order has been received and is now being processed.</span></div>
		<div style="padding-top:200px;font-size:14px">This page should run the checkout tracking code once the purchase has been confirmed.</div>
	</div>
</div>

body{
  background: white !important;
  color: #404b56;  
  font-family: 'Open Sans', sans-serif;
  -webkit-font-smoothing: antialiased;
}
.container{
  //width: 744px;
}
.cart-title{
  margin-top: 0px;
  margin-bottom: 0px;
  text-align: left;
  text-transform: uppercase;
  padding-bottom: 11px;
  font-weight: 300;
  font-size: 13px;
  background: #202632;
  color: #ffffff;
  bottom: 0px;
  /* position: absolute; */
  padding-left: 12px;
  padding-top: 36px;
  min-height: 81px;
}
.img-wrap{
  float: left;
}
.info-wrap{
  position: relative;
  height: 150px;
}
.info-wrap span{
  display: block;
}
.info-wrap span:first-child{
  font-weight: 600;
  font-size: 18px;
}
.info-wrap span:nth-child(2){
  font-weight: 400;
  font-size: 12px;
  text-transform: capitalize;
}
.wrap-item{ 
  //border-bottom: 1px solid #ccc;
}
.cart-items-head{
  text-transform: uppercase;
  padding-left: 14px;
  margin-bottom: 40px;
  font-size: 14px;
  font-weight: 600;
  /* border: 1px solid rgba(204, 204, 204, 0.25); */
  background: #202632;
  color: white;
  padding-bottom: 5px; 
  padding-top:65px;
  text-align:left;
}
.prod-price{
  font-size: 14 px;
}
.prod-price:before{ 
}
.quan input{
  width: 35px;
  padding-left: 3px;
  font-size: 12px;
}
.remove-item{
  color: red;
  font-size: 12px;
  cursor: pointer;   
  float: right;
  margin-right: 5px;
  margin-top: 3px;
}
.remove-item:hover{
  color: black;
}
.cart-items .row{
  margin-bottom: 20px;
}
.test-image{
  width: 128px;
}
.item-row{
  border-bottom: 1px solid rgba(204, 204, 204, 0.25);
  height:120px;
} 
/*override button style*/
.btn{
  border-radius: 0px;
  padding: 10px 25px;
}
#to-checkout{
  float: right;
  margin-right:2px;
}
.tbl-items{
  width: 100%;
}
.tbl-items td{
  border-right: 1px solid;
}
.empty-cart{
  font-size: 26px;
  text-align: center;
  padding: 56px 0px;
  text-transform: uppercase;
  color: #cecece;
  border-bottom: 1px solid rgba(204, 204, 204, 0.25);
}
.btn-default{
  background:#F9F9F9;
  color: black;
  border: 1px solid #ccc; 
} 
.scrolling-wrapper {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: hidden;
  height:480px;
}
.scrolling-wrapper .card {
  flex: 0 0 auto;
  width:744px;
} 
.order-thanks{
  //height:150px;
  background: #202632;
  color:white;
  font-size: 32px;
  font-weight:bold;
  margin-top:40px;
  padding:35px 25px;
}
.order-thanks span{ 
  display:block;
  font-size: 16px;
  font-weight:normal;
  color:#ccc;
}
.heading-order{
  background: #EDEDED;
  color:black;
  padding: 6px 10px; 
  font-size:14px;
  font-weight:bold;
}
.order-wrap{
  width:520px;
  margin-left:auto;
  margin-right:auto;
  margin-top: 25px ;
}
.order-wrap .address{
  margin:10px 0px;
}
.order-wrap>div{
  border: 1px solid #ebebeb; 
}
.form-group{
  color: black;
  padding: 2px 10px;
  margin-bottom: 0px;
}
.form-group label{
  font-size: 12px;
  font-weight:normal;
}
.form-group input{
  border-radius: 0px;
  height:30px;
}
.radio-inline{
  padding:20px
}
.radio-wrap>div{
  color: black;
  padding: 2px 10px;
  margin: 10px 5px;
}
.radio-wrap img {
  margin-left:7px;
}
#place-order{
  float:right;
}
.text-right{
  padding-right:0px;
}
function getUrlVars() {
      var vars = [], hash;
      //var query_string = window.location.search;
      var query_string =  "?name=Pumpkin Armchair&f1=Sunset,1,4404,404/ARMCHAIR_2/assets/viewer/7/1070543/ARMCHAIR%202_1_jpg/large.jpg&\
                           f2=Indiana_Blanc,2,4404,404/ARMCHAIR_2/assets/viewer/7/1070542/ARMCHAIR%202_1_jpg/large.jpg";
      if (query_string) {
          var hashes = query_string.slice(1).split('&');
          for (var i = 0; i < hashes.length; i++) {
              hash = hashes[i].split('=');
              vars[hash[0]] = hash[1];
          }
          return vars;
      } else {
          return false;
      }
  }
  features = getUrlVars();

  featureArray = getUrlVars();
  var accIDfromURL = decodeURIComponent("id");
    var br = 0;
    var productName = "";
    for (var key in featureArray) {
      if (key == "name") {
        productName = featureArray[key];
      }else{
        featureTypeSplit = featureArray[key].split(',');

        var appString =`<div class='row item-row'>
            <div class='wrap-item col-xs-7'> 
              <div class='img-wrap'><img src=https://viewer-isapi.cylindo.com/`+featureTypeSplit[3]+'?accountID='+featureTypeSplit[2]+'&size=128'+ ` class='test-image' ></div>           
              <div class='info-wrap'>
              <span>`+decodeURIComponent(productName)+`</span>
              <span>`+decodeURIComponent(featureTypeSplit[0].replace(/_/g , " "))+`</span>
              </div>
              </div>
              <div class='wrap-item col-xs-2 text-right quan'><input type="number" value="`+featureTypeSplit[1]+`"></div>
              <div class='wrap-item col-xs-2 text-right prod-price'>$`+(299*featureTypeSplit[1])+`</div>
              <div class='wrap-item col-xs-1 '><span data-toggle="tooltip" title="Remove" class="remove-item fa fa-remove" aria-hidden="true"></span></div>
            </div>`;    
        $(".cart-items").append(appString);
      }
      br++;
  }
    
if (br<1) {
  $(".cart-items").append("<div class='empty-cart'>No items in cart</div>");
}

$(".remove-item").click(function(){
    if (confirm('Are you sure you want to remove this item?')) {
        $(this).parent().parent().remove();
        var elementsLeft = $('.item-row').length;
        console.log("Items left "+ elementsLeft);
        if (elementsLeft==0) {
          $(".cart-items").append("<div class='empty-cart'>No items in cart</div>");
        }
    } 
});

$('.btn-success').click(function () {
    console.log('ok')
    $('.scrolling-wrapper').animate({
        scrollLeft: '+=744'
    }, 1000, 'swing');
});
 

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css
  2. https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js