add width to an element with js

Question

I want to add width to some element in my HTML with js but it doesn't work Properly.
I want do that to in responsive design its scrolling.
I try to do that with this code but it doesn't work. in responsive design every things commix.

 <script> $(document).ready(function (e) { $('.seat-ready').click(function (e) { if ($(this).hasClass('active')) { $(this).removeClass('active'); } else { $(this).addClass('active'); } }); }); setTimeout(function () { $('.chairs .row').each(function () { $(this).width( ($(this).children('a').length) * ( $(this).children('a').width() + parseInt($(this).children('a').css("marginRight").replace('px', '')) + parseInt($(this).children('a').css("marginLeft").replace('px', '')) ) + $(this).attr('class').split('-')[1] * $(this).children('a').width() ); $(this).width( ($(this).children('span').length) * ( $(this).children('span').width() + parseInt($(this).children('span').css("marginRight").replace('px', '')) + parseInt($(this).children('span').css("marginLeft").replace('px', '')) ) + $(this).attr('class').split('-')[1] * $(this).children('span').width() ); }); $('.chairs').each(function () { var rowLength = $(this).children('.row').length; for (var i = rowLength; i > rowLength - 12; i--) { $(this).children('.row').eq(i).addClass('top'); } }); }, 500); </script> 

 .hall-wrap { max-width: 100%; width: auto; } .container-chairs { clear: both; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .text-center { display: block; margin: 0 auto; text-align: center; } .text-center #halls { display: none; } .header-hall-sections { font-family: 'Yekan'; line-height: 230%; height: 220px; font-size: 14px; } .header-hall-sections .header-hall-content { position: relative; line-height: 23px; } .header-hall-sections h2 { color: #9f3a67; margin-bottom: 10px; } .header-hall-sections .date, .header-hall-sections .time { color: #9f3a67; font-size: 17px; margin-bottom: 5px; } .header-hall-sections .btn.cancel-all { background: #dc3c3f; border: none; color: #fff; float: left; font-size: 14px; height: 33px; margin-top: 5px; padding: 9px 25px 0; transition: all 0.2s ease; opacity: 0; visibility: hidden; } .header-hall-sections .btn.cancel-all.show { opacity: 1; visibility: visible; } .header-hall-content .btn, .header-hall-content .btn + .btn { position: absolute; bottom: 0; height: 31px; padding: 7px 25px 0; background: #e6e6e6; } .header-hall-content .btn + .btn { margin-right: 103px; background: #009a35; border: 1px solid #328e4d; color: #fff; } .thumb-concert { margin-left: 15px; float: right; border: 1px solid #c8c8c6; padding: 2px; height: 176px; width: 176px; } .header-hall { width: 100%; border-top: 1px solid #e3e3e3; border-bottom: 1px solid #e3e3e3; margin-top: 15px; white-space: nowrap; } .header-hall:after { content: ""; display: table; clear: both; } .header-hall li { padding: 5px 33px 5px 0; float: right; margin-left: 25px; } .header-hall li.seat-disabled { background: url('http://tik8.com/assets/user/img/chairs.png') no-repeat 100% -82px; } .header-hall li.seat-reserved { background: url('http://tik8.com/assets/user/img/chairs.png') no-repeat 100% -20px; } .header-hall li.seat-ready { background: url('http://tik8.com/assets/user/img/chairs.png') no-repeat 100% -51px; } .header-hall li.seat-selected { background: url('http://tik8.com/assets/user/img/chairs.png') no-repeat 100% -113px; } .header-hall li.seat-sold { background: url('http://tik8.com/assets/user/img/chairs.png') no-repeat 100% 11px; } .ticket-filed { line-height: 23px; color: #333; } .ticket-filed label { color: #111; } .chairs { text-align: center; padding: 30px 0; margin: auto; display: table; } .chairs .row { clear: both; display: block; white-space: nowrap; } .chairs .row span { float: right; display: block; position: relative; margin: 4px; width: 25px; height: 21px; color: rgba(0, 0, 0, 0.35); cursor: default; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35); padding: 0; text-align: center; } .chairs .row a { float: right; display: block; position: relative; margin: 4px; width: 25px; height: 21px; color: rgba(0, 0, 0, 0.35); cursor: default; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35); text-decoration:none; padding: 0; text-align: center; } .chairs .row a.seat-ready, .chairs .row a.active { cursor: pointer; } .chairs .row span.seat-ready:hover, .chairs .row span.active:hover { font-weight: bold; } .chairs .row span.seat-ready:hover .chairs-tooltip, .chairs .row span.active:hover .chairs-tooltip { font-weight: normal; opacity: 1; visibility: visible; transition: 0.2s; } .chairs .row span.row-number { color: #444; } .row-name { font-size: 13px !important; font-weight: bold; height: 23px; position: absolute; right: 10%; text-align: center; width: 40px; } .chairs .row span input[type="checkbox"] { position: absolute; width: 28px; height: 21px; left: 0; top: 0; opacity: 0; cursor: pointer; z-index: -1; } .chairs .row-number{ z-index: 10; } .chairs .seat-disabled { background: url('http://tik8.com/assets/user/img/chair5.png') no-repeat 0 0; color: #e6e6e6; } .chairs .seat-reserved { background: url('http://tik8.com/assets/user/img/chair2.png') no-repeat 0 0; color: #666666; } .chairs .seat-ready { background: url('http://tik8.com/assets/user/img/chair4.png') no-repeat 0 0; color: white !important; } .chairs .seat-ready.active { background: url('http://tik8.com/assets/user/img/chair6.png') no-repeat 0 0; color: white; } .chairs .seat-sold { background: url('http://tik8.com/assets/user/img/chair1.png') no-repeat 0 0; color: gray; } .seat-ready > input[type="text"] { background-color: #6eab2b; border: medium none; color: white; display: block; height: 15px !important; opacity: 1; padding: 0; text-align: center; width: 20px !important; z-index: 100px; } a.seat-ready { background-color: #6eab2b; border: medium none; color: white; display: block; height: 15px; opacity: 1; padding: 0; text-align: center; /*width: 20px !important; */ z-index: 100px; } .edit-label{ padding: 0px; } .edit-label input[type="text"] { background-color: white; border: 1px solid black; height: 15px !important; opacity: 1; padding: 0; text-align: center; width: 25px !important; z-index: 100px; color: black; } .seat-ready.active input[type="text"]{ background-color: transparent; color: white; } a.seat-ready.active { background-color: transparent; color: white; } .left-1 { padding-right: 16px; } .left-2 { padding-right: 32px; } .left-3 { padding-right: 48px; } .left-4 { padding-right: 64px; } .left-5 { padding-right: 80px; } .left-6 { padding-right: 96px; } .left-7 { padding-right: 112px; } .left-8 { padding-right: 128px; } .left-9 { padding-right: 144px; } .left-10 { padding-right: 160px; } .left-11 { padding-right: 176px; } .left-12 { padding-right: 192px; } .chairs-tooltip { position: absolute; top: 135%; visibility: hidden; opacity: 0; width: 190px; left: -81px; text-align: right; text-shadow: none; z-index: 99; white-space: pre-line; } .top .chairs-tooltip { top: auto; bottom: 135%; } .top .chairs-tooltip:after, .top .chairs-tooltip:before { bottom: auto; top: 100%; } .top .chairs-tooltip:after { border-bottom-color: transparent; border-top-color: white; } .top .chairs-tooltip:before { border-bottom-color: transparent; border-top-color: #d9d9d9; } /*--------------------------------------------------*\\ Nice Tooltip \\*--------------------------------------------------*/ #cvi_tooltip { display: none; position: absolute; border: 1px solid #d9d9d9; background-color: #fff; border-radius: 5px; padding: 5px 8px; color: #000; max-width: 300px; min-width: 30px; user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; } #cvi_tooltip:after, #cvi_tooltip:before { position: absolute; pointer-events: none; border: solid transparent; top: 100%; content: ""; height: 0; width: 0; z-index: 2; } #cvi_tooltip:after { border-top-color: white; border-width: 8px; left: 50%; margin-left: -8px; } #cvi_tooltip:before { border-top-color: #d9d9d9; border-width: 9px; left: 50%; margin-left: -9px; } .right-1{ padding-right:16px } .right-2{ padding-right:32px } .right-3{ padding-right:48px } .right-4{ padding-right:64px } .right-5{ padding-right:80px } .right-6{ padding-right:96px } .right-7{ padding-right:112px } .right-8{ padding-right:128px } .right-9{ padding-right:144px } .right-10{ padding-right:160px } .right-11{ padding-right:176px } .right-12{ padding-right:192px } .content { position: relative; } .top { position: static; width: 100%; } 

 <div class="hall-wrap"> <section class="container-chairs"> <section class="content"> <div class="chairs"> <div class="row right-2"> <span class="row-number">1</span> <a href="" class="seat-ready">1</a> <a href="" class="seat-ready">2</a> <a href="" class="seat-ready">3</a> <a href="" class="seat-ready">4</a> <a href="" class="seat-ready">5</a> <a href="" class="seat-ready">6</a> <a href="" class="seat-ready">7</a> <a href="" class="seat-ready">8</a> <span class="offset"></span> <span class="offset"></span> <span class="row-number">1</span> </div> <div class="row right-1"> <span class="row-number">2</span> <a href="" class="seat-ready">1</a> <a href="" class="seat-ready">2</a> <a href="" class="seat-ready">3</a> <a href="" class="seat-ready">4</a> <a href="" class="seat-ready">5</a> <a href="" class="seat-ready">6</a> <a href="" class="seat-ready">7</a> <a href="" class="seat-ready">8</a> <a href="" class="seat-ready">9</a> <span class="offset"></span> <span class="row-number">2</span> </div> <div class="row right-2"> <span class="row-number">3</span> <a href="" class="seat-ready">1</a> <span class="seat-sold">2</span> <span class="seat-sold">3</span> <span class="seat-sold">4</span> <span class="seat-sold">5</span> <span class="seat-sold">6</span> <a href="" class="seat-ready">7</a> <a href="" class="seat-ready">8</a> <span class="offset"></span> <span class="offset"></span> <span class="row-number">3</span> </div> <div class="row right-2"> <span class="row-number">4</span> <a href="" class="seat-ready">1</a> <a href="" class="seat-ready">2</a> <a href="" class="seat-ready">3</a> <a href="" class="seat-ready">4</a> <span class="seat-disabled">5</span> <span class="seat-disabled">6</span> <span class="seat-disabled">7</span> <span class="seat-disabled">8</span> <span class="seat-disabled">9</span> <span class="offset"></span> <span class="row-number">4</span> </div> <div class="row right-2"> <span class="row-number">5</span> <a href="">1</a> <a href="" class="seat-ready">2</a> <a href="" class="seat-ready">3</a> <span class="seat-disabled">4</span> <span class="seat-disabled">5</span> <span class="seat-disabled">6</span> <span class="seat-disabled">7</span> <span class="seat-disabled">8</span> <span class="offset"></span> <span class="offset"></span> <span class="row-number">5</span> </div> <div class="row right-1"> <span class="row-number">6</span> <a href="" class="seat-ready">1</a> <a href="" class="seat-ready">2</a> <a href="" class="seat-ready">3</a> <a href="" class="seat-ready">4</a> <a href="" class="seat-ready">5</a> <a href="" class="seat-ready">6</a> <a href="" class="seat-ready">7</a> <a href="" class="seat-ready">8</a> <a href="" class="seat-ready">9</a> <span class="offset"></span> <span class="row-number">6</span> </div> <div class="row right-2"> <span class="row-number">7</span> <a href="" class="seat-ready">1</a> <a href="" class="seat-ready">2</a> <a href="" class="seat-ready">3</a> <a href="" class="seat-ready">4</a> <a href="" class="seat-ready">5</a> <a href="" class="seat-ready">6</a> <a href="" class="seat-ready">7</a> <a href="" class="seat-ready">8</a> <span class="offset"></span> <span class="offset"></span> <span class="row-number">7</span> </div> </section> </section> </div> 

Answer 1

I think I'll take a guess what you are looking for. Maybe its something like this .

Note: The js is only for generating the html, which is very similar to what you used.

 var HALL_DATA = [ /* 0=offset, 1=ready, 2=sold, 3=disabled */ [1,1,1,1,1,1,1,1,0,0], //1 [1,1,1,1,1,1,1,1,1,0], //2 [1,2,2,2,2,2,1,1,0,0], //3 [1,1,1,1,3,3,3,3,3,0], //4 [1,1,1,3,3,3,3,3,0,0], //5 [1,1,1,1,1,1,1,1,1,0], //6 [1,1,1,1,1,1,1,1,0,0] //7 ]; var SEAT_CLASSES = ['offset', 'seat-ready', 'seat-sold', 'seat-disabled']; var seatTemplate = '<a href="#" class="{SEAT_CLASS}">{SEAT_NR}</a>'; var rowTemplate = '<div id="row-{ROW_NR}" class="row">{ROW_CONTENT}</div>'; function getHallContent() { var html = ''; for(i=0; i<HALL_DATA.length; i++) { html += rowTemplate.replace('{ROW_CONTENT}',getRowContent(i)).replace('{ROW_NR}',i+1); console.log() } return html; } function getRowContent(theIndex) { rowHtml = ''; rowData = HALL_DATA[theIndex]; for(j=0; j<rowData.length; j++) { var seatClass = SEAT_CLASSES[rowData[j]], seatNr = j+1; //cause j is index rowHtml += seatTemplate.replace('{SEAT_CLASS}',seatClass).replace('{SEAT_NR}',seatNr); } return rowHtml; } $(document).ready(function() { $('.hall-wrap').html(getHallContent()); }); 

 .hall-wrap { display:table; width:100%; max-width:200px; } .row { display:table-row; } .row a { display:table-cell; color:#333; text-decoration:none; width:20px; height:20px; font-family:sans-serif; text-align:center; line-height:20px; } .seat-ready { background: #89CC45; } .seat-sold { background: #C93E41; } .seat-disabled { background: #C2C5CF; } a.offset { background:transparent; color:transparent; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="hall-wrap"></div>