increasing a div width on dragging is not work properly

i have some div. i want adjust div width on dragging my problem is 1. when i use draggable div id in script only one div work properly 2.if i use the common class all div are adjustable when drag a single one how can solve this $(function () { var container = $('.middletablediv'), base = $('#timebase1'), handle = $('#handle'); handle.on('mousedown', function (e) { isResizing = true; lastDownX = e.clientX; }); $(document).on('mousemove', function (e) { // we don't want to do anything if we aren't resizing. if (!isResizing) return; var p = (e.clientX - base.offset().left); base.css('width', p); }).on('mouseup', function (e) { // stop resizing isResizing = false; }); }) .activelevel1 { background-color: #EA623E; } .timescalebase { margin-top: 13px; height: 7px; position: relative; width:60px; height:5px; } #handle { position: absolute; right:0; top: 0; bottom: 0; width: 8px; cursor: w-resize; background-color:black; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="container" style="width:100%;margin-top:25px;"> <div id="timebase1" class="timescalebase activelevel1"> <div id="handle" ></div> </div> <div id="timebase2" class="timescalebase activelevel1"> <div id="handle"></div> </div> <div id="timebase3" class="timescalebase activelevel1"> <div id="handle"></div> </div> <div id="timebase4" class="timescalebase activelevel1"> <div id="handle"></div> </div>