We Keep Coding

Bootstrap list-group: is it possible to duplicate item?

I'm a newbie in web development and am now starting a project using bootstrap and jquery as a start.
I might be mistaken in my understanding of web development, but I'll try asking this anyway:
I have a list-group of cards. Each card as an item (just li, not using list-group-item to preserve card style).
I want to be able to dynamically insert new cards. Currently I'm manually adding the HTML code using js/jquery. For example:
let card_class = document.createElement("div");
card_class.setAttribute("class", "card mx-3 my-5");
card_class.setAttribute("name", "card-class");
let row_class = document.createElement("div");
row_class.setAttribute("class", "row no-gutters bg-dark text-white-50");
row_class.setAttribute("name", "row-class");
let profile_class = '<div class="col-auto">'+
'<img src="profile.jpg" style="height:50px;" class="img-fluid" alt=""></img></div>';
let col_class = document.createElement("div");
col_class.setAttribute("class", "col");
col_class.setAttribute("name", "col-class");
let card_col_class = document.createElement("div");
card_col_class.setAttribute("class", "card-block px-2");
card_col_class.setAttribute("name", "card-col-class");
let card_footer = '<div class="card-footer"><span class="btn-toolbar btn-group-sm px-5">'+
'<button type="button" class="btn text-white-50 mx-auto rounded-circle" data-toggle="modal" data-target="#post-comment"><i class="far fa-comment-alt"></i></button>'+
'<button type="button" class="btn text-white-50 mx-auto rounded-circle"><i class="fas fa-retweet"></i></button>'+
'<button type="button" class="btn text-white-50 mx-auto rounded-circle"><i class="far fa-heart"></i></button>'+
'<button type="button" class="btn text-white-50 mx-auto rounded-circle"><i class="far fa-share-square"></i></button></span></div>';
//get the tweet info (object parameter) and put it in the header and body of the card.
let username = tweet_info.username;
let tweet = tweet_info.tweet;
let card_header = '<div class="card-header">#'+username+'</div>';
let card_body = '<div class="card-body" style="white-space: pre-wrap;" onclick="setInfo(this)" type="button"'+
'data-toggle="modal" data-target="#tweet-id">'+tweet+"</div>";
//now actually add the card to the html.
$("div[name='main-content'").prepend(card_class);
$("div[name='card-class']").append(row_class);
$("div[name='row-class']").append(profile_class);
$("div[name='row-class']").append(col_class);
$("div[name='col-class']").append(card_col_class);
$("div[name='card-col-class']").append(card_header);
$("div[name='card-col-class']").append(card_body);
$("div[name='card-col-class']"]).append(card_footer);
What I wondered is, how can I simplify my code.
I thought, is it possible to for example take an li item, duplicate it and just change it a bit?
Edit:
For example, the HTML code to duplicate (same as the js code):
<li class="card">
<div class="row no-gutters bg-dark text-white-50">
<div class="col-auto">
<img src="profile.jpg" style="height:50px;" class="img-fluid" alt="">
</div>
<div class="col">
<div class="card-block px-2">
<div class="card-header">#Username</div>
<div class="card-body" onclick="setInfo(this)" type="button" data-toggle="modal" data-target="#tweet-id">Content</div>
<div class="card-footer">
<span class="btn-toolbar btn-group-sm px-5">
<button type="button" class="btn mx-auto text-white-50 rounded-circle"><i class="far fa-comment-alt"></i></button>
<button type="button" class="btn mx-auto text-white-50 rounded-circle" data-toggle="collapse" data-target="#comments"><i class="far fa-comments"></i></button>
<button type="button" class="btn mx-auto text-white-50 rounded-circle"><i class="fas fa-retweet"></i></button>
<button type="button" class="btn mx-auto text-white-50 rounded-circle"><i class="far fa-heart"></i></button>
<button type="button" class="btn mx-auto text-white-50 rounded-circle"><i class="far fa-share-square"></i></button>
</span>
</div>
</div>
</div>
</div>
</li>

You can use .clone() to clone your html element then use .find() to change any element inside this cloned element and finally append same to your ul using appendTo method.
Demo Code :
$("#cloned").on("click", function() {
var cln = $("ul li:first").clone() //cloned first li
cln.find(".link").text("something") //use find and change username
cln.find(".card-body").text("something something...") //use find and change content
$(cln).appendTo($("ul")) //append to ul
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="card">
<div class="row no-gutters bg-dark text-white-50">
<div class="col-auto">
<img src="profile.jpg" style="height:50px;" class="img-fluid" alt="">
</div>
<div class="col">
<div class="card-block px-2">
<div class="card-header">#Username</div>
<div class="card-body" onclick="setInfo(this)" type="button" data-toggle="modal" data-target="#tweet-id">Content</div>
<div class="card-footer">
<span class="btn-toolbar btn-group-sm px-5">
<button type="button" class="btn mx-auto text-white-50 rounded-circle"><i class="far fa-comment-alt"></i></button>
<button type="button" class="btn mx-auto text-white-50 rounded-circle" data-toggle="collapse" data-target="#comments"><i class="far fa-comments"></i></button>
<button type="button" class="btn mx-auto text-white-50 rounded-circle"><i class="fas fa-retweet"></i></button>
<button type="button" class="btn mx-auto text-white-50 rounded-circle"><i class="far fa-heart"></i></button>
<button type="button" class="btn mx-auto text-white-50 rounded-circle"><i class="far fa-share-square"></i></button>
</span>
</div>
</div>
</div>
</div>
</li>
</ul>
<button id="cloned">Clone Me</button>

Drag and drop 2 boxes

I have a blue and a red box. I would like to drag and drop them, so that they can be switched. For now, I can drag the left box and drop it in the right box. That works fine but I cannot drag the right box and drop it in the left box.
// Drag and the drop the items
const elements = document.querySelectorAll('#title-drag, #storename-drag');
for (let element of elements) {
// Allow the drop
element.addEventListener("dragover", function(event) {
event.preventDefault();
}, false);
element.addEventListener("dragstart", function(event) {
event.dataTransfer.setData("text", event.target.id);
}, false);
element.addEventListener('drop', function(event) {
let data = event.dataTransfer.getData("text");
console.log(event.target.className);
event.preventDefault();
element.appendChild(document.getElementById(data));
});
}
#title {
background: red;
}
#storename {
background: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/js/all.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<!-- Title -->
<div class="row">
<div id="title-drag">
<div class="col-md-3" draggable="true" id="title">
<div class="mg-item-inner">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" data-container='body' title='Gibt den Seitentitel aus'>
<span class="name">TITLE</span><i class="fas fa-arrows-alt"></i></button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" data-container='body' title="Linie Erweitern / Reduzieren">
<i class="fas fa-swatchbook"></i></button>
</div><!-- /btn-group -->
<div class="input-group" role="group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">prefix <i class="fas fa-sort"></i></button>
<ul class="dropdown-menu">
<li>prefix</li>
<li>suffix</li>
<li>none</li>
</ul>
</div><!-- /input-btn-group -->
<input type="text" class="form-control">
</div><!-- /input-group --><span type="button" class="btn add"><i class="fas fa-plus-circle"></i></span>
</div><!-- /mg-item-inner -->
</div><!-- /mg-item -->
</div>
<!--STORE NANE -->
<div id="storename-drag">
<div class="col-md-3" draggable="true" id="storename">
<div class="mg-item-inner">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" data-container='body' title='Fügt den Storename hinzu'>
<span class="name">STORENAME</span><i class="fas fa-arrows-alt"></i></button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Linie Erweitern / Reduzieren">
<i class="fas fa-swatchbook"></i></button>
</div><!-- /btn-group -->
<div class="input-group" role="group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">prefix <i class="fas fa-sort"></i></button>
<ul class="dropdown-menu">
<li>prefix</li>
<li>suffix</li>
<li>none</li>
</ul>
</div><!-- /input-btn-group -->
<input type="text" class="form-control">
</div><!-- /input-group --><span type="button" class="btn add"><i class="fas fa-plus-circle"></i></span>
</div><!-- /mg-item-inner -->
</div><!-- /mg-item -->
</div>
</div>
</div>
https://jsfiddle.net/Lb8e0pz3/
Why can I drop the left box but not the right one?

It just because you do
element.appendChild(document.getElementById(data));
which always add item as last children... So moved element will be always last - that's why if you move second item, it will still be displayed as second. From the pure code perspective, everything works.

you could see if the target is the first element of the parent, and if so add:
if (isFirstElement(event.target)) { // implement function
element.parentNode.prepend(document.getElementById(data+'-drag'));
} else {
element.parentNode.appendChild(document.getElementById(data+'-drag'));
}

Bootstrap 4 carousel next and prev buttons are not working on one page but works fine on other

This Carousel is working fine on one webpage(slide automatically and with buttons), but when i ut this code to my index page then it slides automatticaly but not with buttons(prev, next).
Following is the code:
(Entire is the complete detail of this error, I am using html5 with Bootstrap4)
<div class="container-fluid pb-5">
<div class="row">
<div class="col-12 text-center mt-3">
<h1 class="mx-auto mt-5 afterline">Programs & Projects</h1>
</div>
</div>
<div class="row">
<div class="col-6 col-xs-4 mt-4">
<select id="select_featured_project" class="float-right px-xl-5 px-lg-5 px-md-5 px-4 py-3">
<option value="featured">Featured</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</div>
<div class="col-6 col-xs-4 mt-4">
<select id="select_design_tech" class="px-xl-5 px-lg-5 px-md-5 px-2 py-3">
<option value="featured">Design & Tech</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</div>
</div>
<!-- Carousel row -->
<div class="row">
<div class="col-12">
<div id="carouselExampleControls" class="carousel slide mt-5" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="container p-4">
<!-- row 1 -->
<div class="row justify-content-center">
<div class="col-xl-3 col-lg-3 col-12 bg-dark mr-3" style="height:300px;" >
<h1 class="text-white pt-5 pl-4">PROJECT NAME</h1>
<h5 class="pt-2 pl-4" style="color:#cccccc">PROJECT TYPE</h5>
<i class="fab fa-facebook fa-2x pt-4 pl-4" style="color:#cccccc;"></i>
<i class="fab fa-google fa-2x pt-4 pl-4" style="color:#cccccc;"></i>
</div>
<div class="col-xl-3 col-lg-3 col-12 mr-3" style="background:#cccccc">
</div>
<div class="col-xl-3 col-lg-3 col-12" style="background:#cccccc">
</div>
</div>
<!-- row 1 ends -->
<!-- row 2 -->
<div class="row justify-content-center mt-3">
<div class="col-xl-3 col-lg-3 col-12 bg-dark mr-3" style="height:300px;" >
<h1 class="text-white pt-5 pl-4">PROJECT NAME</h1>
<h5 class="pt-2 pl-4" style="color:#cccccc">PROJECT TYPE</h5>
<i class="fab fa-facebook fa-2x pt-4 pl-4" style="color:#cccccc;"></i>
<i class="fab fa-google fa-2x pt-4 pl-4" style="color:#cccccc;"></i>
</div>
<div class="col-xl-3 col-lg-3 col-12 mr-3" style="background:#cccccc">
</div>
<div class="col-xl-3 col-lg-3 col-12" style="background:#cccccc">
</div>
</div>
<!-- row 2 ends -->
</div>
<!-- container ends -->
</div>
<!-- carousel-item slide 1 ends -->
<div class="carousel-item">
<div class="container p-4">
<!-- row 1 -->
<div class="row justify-content-center">
<div class="col-xl-3 col-lg-3 col-12 bg-dark mr-3" style="height:300px;" >
<h1 class="text-white pt-5 pl-4">PROJECT NAME</h1>
<h5 class="pt-2 pl-4" style="color:#cccccc">PROJECT TYPE</h5>
<i class="fab fa-facebook fa-2x pt-4 pl-4" style="color:#cccccc;"></i>
<i class="fab fa-google fa-2x pt-4 pl-4" style="color:#cccccc;"></i>
</div>
<div class="col-xl-3 col-lg-3 col-12 mr-3" style="background:#cccccc">
</div>
<div class="col-xl-3 col-lg-3 col-12" style="background:#cccccc">
</div>
</div>
<!-- row 1 ends -->
<!-- row 2 -->
<div class="row justify-content-center mt-3">
<div class="col-xl-3 col-lg-3 col-12 bg-dark mr-3" style="height:300px;" >
<h1 class="text-white pt-5 pl-4">PROJECT NAME</h1>
<h5 class="pt-2 pl-4" style="color:#cccccc">PROJECT TYPE</h5>
<i class="fab fa-facebook fa-2x pt-4 pl-4" style="color:#cccccc;"></i>
<i class="fab fa-google fa-2x pt-4 pl-4" style="color:#cccccc;"></i>
</div>
<div class="col-xl-3 col-lg-3 col-12 mr-3" style="background:#cccccc">
</div>
<div class="col-xl-3 col-lg-3 col-12" style="background:#cccccc">
</div>
</div>
<!-- row 2 ends -->
</div>
<!-- container ends -->
</div>
<!-- carousel-item slide 2 ends -->
</div>
<!-- carousel-inner ends -->
<a class="carousel-control-prev" style="color:black" href="#carouselExampleControls" role="button" data-slide="prev">
<!-- <span class="carousel-control-prev-icon" aria-hidden="true"></span> -->
<!--visible on xl-->
<span><i class="d-none d-xl-block fas fa-chevron-left fa-10x fa-lg fa-sm fa-xs" aria-hidden="true"></i></span>
<!-- visible on lg -->
<span><i class="d-none d-lg-block d-xl-none fas fa-chevron-left fa-8x" aria-hidden="true"></i></span>
<!-- visible on md -->
<span><i class="d-none d-md-block d-lg-none fas fa-chevron-left fa-6x" aria-hidden="true"></i></span>
<!-- visible on sm -->
<span><i class="d-none d-sm-block d-md-none fas fa-chevron-left fa-4x" aria-hidden="true"></i></span>
<!-- visible on xs -->
<span><i class="d-block d-sm-none fas fa-chevron-left fa-2x" aria-hidden="true"></i></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" style="color:black;" href="#carouselExampleControls" role="button" data-slide="next">
<!--visible on xl-->
<span><i class="d-none d-xl-block fas fa-chevron-right fa-10x fa-lg fa-sm fa-xs" aria-hidden="true"></i></span>
<!-- visible on lg -->
<span><i class="d-none d-lg-block d-xl-none fas fa-chevron-right fa-8x" aria-hidden="true"></i></span>
<!-- visible on md -->
<span><i class="d-none d-md-block d-lg-none fas fa-chevron-right fa-6x" aria-hidden="true"></i></span>
<!-- visible on sm -->
<span><i class="d-none d-sm-block d-md-none fas fa-chevron-right fa-4x" aria-hidden="true"></i></span>
<!-- visible on xs -->
<span><i class="d-block d-sm-none fas fa-chevron-right fa-2x" aria-hidden="true"></i></span>
<span class="sr-only">Next</span>
</a>
<!-- carousel-controls ends -->
</div>
</div>
</div>
<!--Carousel row ends -->
</div>
Bootstrap cdn
<!--DISABLE ZOOMING -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="./styles/style.css">
<!-- <link rel="stylesheet" type="text/css" href="./styles/bootstrap-4.4.1/css/bootstrap.min.css"> -->
jQuery cdn
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/37a1f2cd33.js" crossorigin="anonymous"></script>

This problem was because of same id of multiple carousel.

Jquery sortable and draggable helper function change element onclick for single element while having multiple elements

I am trying to make a looking like Wordpress cms (backend part) thing. It is possible to add multiple, exactly the same, header elements where a user can write inside and safe. Creating/adding all works. Dragging, dropping and sorting also works (jquery-ui). I already made all exactly the same heading elements have an diffrent ID using var "index"). The problem is that I cant get the id of the heading element I clicked. I need this so I ONLY change color, font-size and text-color to the one I clicked, and not to all of them... I think all my code is getting very messy and need to ask you guys because I am stuck :(
Like the code is right now, it works perfectly for just 1 of the draggable objects. I want it to work for mutliple.
Here is my code:
<script>
var index = 0;
$(function() {
$("#sortable").sortable({
revert: false,
});
$(".draggableElement").draggable({
connectToSortable: "#sortable",
revert: "invalid",
//helper: "clone"
helper: function(){
$("#removeDiv").remove();
var element = '\
<div id="containerHeader_'+index+'" class="bg-light w-100 mb-3 h-auto">\
<div class="border-bottom p-2 d-flex">\
<button id="firstHeader" onclick="headingOne()" class="mr-2 font-weight-500 cursor-pointer bg-transparent border-0 outline-none">H1</button>\
<button id="secondHeader" onclick="headingTwo()" class="mr-2 font-weight-500 cursor-pointer bg-transparent border-0 outline-none">H2</button>\
<button id="thirdHeader" onclick="headingThree()" class="mr-2 font-weight-500 cursor-pointer bg-transparent border-0 outline-none">H3</button>\
<button id="fourthHeader" onclick="headingFour()" class="mr-2 font-weight-500 cursor-pointer bg-transparent border-0 outline-none">H4</button>\
<button id="fifthHeader" onclick="headingFive()" class="mr-2 font-weight-500 cursor-pointer bg-transparent border-0 outline-none">H5</button>\
<button id="sixtHeader" onclick="headingSix()" class="mr-2 font-weight-500 cursor-pointer bg-transparent border-0 outline-none">H6</button>\
</div>\
<input id="headingInput" class="form-control border-0 shadow-none testen-class large-input" placeholder="Heading"></input>\
</div>';
index ++;
return element;
}
});
});
{# $(document).ready(function() {
$("#firstHeader").click(function() {
alert("clik");
});
}); #}
function headingOne() {
$("#headingInput").css('font-size', '3rem');
$(".font-weight-500").css('color', 'black');
$("#firstHeader").css('color', '#0069d9');
//console.log("containerHeader_"+index);
//$("containerHeader_"+index).find("#firstHeader").css('color', '#0069d9');
}
//function headingTwo, three, four ... Exactly the same
</script>
The blue buttons in the left top are draggable, after the drag they transform into the "Heading" part with H1 H2 H3 etc. I dragged 2 Heading elements into the page. Only the first one is always working... Hope this edit helps to make it more clear.
Here is the image:
This is my HTML, of the draggable buttons.
<div class="border-top d-flex justify-content-between flex-wrap pt-3 px-3">
<div class="text-center pb-3 flex-30 draggableElement">
<div class="btn btn-primary custom-padding-button" data-toggle="tooltip" data-placement="top" title="Header">
<i class="fas fa-heading fa-2x fa-fw"></i>
</div>
</div>
<div class="text-center pb-3 flex-30 draggableElement">
<div class="btn btn-primary custom-padding-button" data-toggle="tooltip" data-placement="top" title="Text">
<i class="fas fa-align-left fa-2x fa-fw"></i>
</div>
</div>
<div class="text-center pb-3 flex-30 draggableElement">
<div class="btn btn-primary custom-padding-button" data-toggle="tooltip" data-placement="top" title="Image">
<i class="far fa-image fa-2x fa-fw"></i>
</div>
</div>
<div class="text-center pb-3 flex-30 draggableElement">
<div class="btn btn-primary custom-padding-button" data-toggle="tooltip" data-placement="top" title="Audio">
<i class="fas fa-volume-up fa-2x fa-fw"></i>
</div>
</div>
<div class="text-center pb-3 flex-30 draggableElement">
<div class="btn btn-primary custom-padding-button" data-toggle="tooltip" data-placement="top" title="Link">
<i class="fas fa-link fa-2x fa-fw"></i>
</div>
</div>
<div class="text-center pb-3 flex-30 draggableElement">
<div class="btn btn-primary custom-padding-button" data-toggle="tooltip" data-placement="top" title="Video">
<i class="fas fa-video fa-2x fa-fw"></i>
</div>
</div>
</div>
//Sortable
<div class="container bg-secondary input-group p-3">
<div class="container gray input-group w-100" id="testContainer">
<div class="w-100">
<input class="form-control shadow-none large-input remove-border mb-3" placeholder="Titel"></input>
</div>
<div class="w-100">
<input class="form-control shadow-none remove-border mb-3" placeholder="Subtitel"></input>
</div>
<div class="w-100">
<textarea class="form-control shadow-none remove-border mb-3" placeholder="Samenvatting"></textarea>
</div>
<div class="w-100">
<input type="text" data-role="tagsinput"/>
</div>
</div>
<div id="sortable" class="py-3 w-100">
<div id="removeDiv" class="text-center text-white">Drag in here</div>
</div>
</div>

you need to convert button id to class.
<button id="firstHeader"
to
<button class="firstHeader"
and script becomes
$(".firstHeader").click(function() {
alert($(this).parents(".bg-light").attr("id"));
});

high light latest file while uploading document and scroll bar should be move as per document

i am trying to achieve the functionality of move scroll bar as per new upload, when i am uploading any document at that time i am high lighting that document,suppose i have 20 document in my list then i am uploading 21th document that time scroll bar should move to that document means it should move as per new document,currently i am showing latest document through high lighting but scroll bar is not moving,if somebody know how to achieve this functionality please guide me how to do that i am new to UI.Thanks.
here is my html code where i am showing list of document:
<div id="resume-panel" class="panel-collapse collapse">
<div class="panel-body upload-newFile-container">
<div class="input-group file-preview">
<input placeholder="" type="text" class="form-control file-preview-filename" ng-value="(myFile.length > 1 ? myFile[0]._file.webkitRelativePath.substring(0, myFile[0]._file.webkitRelativePath.lastIndexOf('/')) : myFile.name)" disabled="disabled">
<span class="input-group-btn button-position">
<div class="btn btn-info btn-labeled file-preview-input" ng-disabled="isSingleFileSelected">
<span class="glyphicon glyphicon-folder-open"></span>
<span class="file-preview-input-title">BrowseFolder</span>
<input type="file" ng-click="clearFileName()" id="uploadId" webkitdirectory directory multiple file-upload="myFile" accept=".txt, .rtf, .pdf, .doc, .docx, .rtx, .odt, .sxw, .wpd, .odf"
name="input-file-preview" />
</div>
<div class="btn btn-info btn-labeled file-preview-input" ng-disabled="isFolderSelected">
<span class="glyphicon glyphicon-file"></span>
<span class="file-preview-input-title">BrowseFile</span>
<input type="file" ng-click="clearFileName()" file-upload="myFile" ng-disabled="isFolderSelected" accept=".txt, .rtf, .pdf, .doc, .docx, .rtx, .odt, .sxw, .wpd, .odf" name="input-file-preview"
/>
</div>
<button type="button" class="btn btn-labeled btn-info" ng-disabled="myFile === null || myFile === undefined || uploadButtonDisabled" data-ng-click="upload();disableButton()" ng-change="latestResume()">
<span class="btn-label">
<i class="glyphicon glyphicon-upload"></i>
</span>Upload
</button>
</span>
</div>
<uib-progressbar
class="progress-striped active"
ng-show="folderProcessing && !isSingleFile"
animate="true" max="100"
value="progressValuePercentage"
type="success">
<i>
<span>
{{progressValuePercentage}} / 100
</span>
</i>
</uib-progressbar>
<div class="processed-file-container col-xs-12 col-md-12 nopadding">
<div class="loading-message-container" ng-show="showResumeLoadingPanel">
<h3>Loading data... Please wait.</h3>
<div class="progress progress-striped active page-progress-bar">
<div class="progress-bar" style="width: 100%;"></div>
</div>
</div>
<div class="processed-document col-xs-12 col-md-12 col-lg-12 nopadding" ng-show="!showResumeLoadingPanel">
<div class="panel-heading">
<span ng-if="jdSelected" class="jdContext jdContextInManageResume" ng-show="isjdDeleted">
<span>Company : {{companyName}}</span><br>
<span>JobDescription : {{jdName}}</span>
</span>
<div class="pull-right nopadding refreshBtnInManageResume">
<button class="btn btn-labeled btn-info btn-reload pull-right" data-ng-click="loadResumePanel()">
<i class="fa fa-refresh" aria-hidden="true"></i>
<span class="small-left-margin">Refresh</span>
</button>
</div>
<div class="pull-right nopadding download-quick-tracker-position" ng-if="jdSelected && processResumeFiles.length > 0" ng-show="isjdDeleted">
<button class="btn btn-labeled btn-info pull-right" data-ng-click="downloadQuickTracker(jdUniqueId)">
<i class="fa fa-download" aria-hidden="true"></i>
<span class="">QuickTracker</span>
</button>
</div>
</div>
<div class="panel-body">
<div class="row marginForRefreshBtn">
<table class="table table-striped" id="manageResumeTable">
<thead class="text-center text-info text-capitalize">
<th class="text-center col-xs-1">Sr.No.</th>
<th class="text-center col-xs-4">Document</th>
<th class="text-center col-xs-1">Score</th>
<th class="text-center col-xs-1">QuickScore</th>
<th class="text-center col-xs-5">Actions</th>
</thead>
<tr ng-repeat="file in processResumeFiles" ng-class="{'highlighter-row-Class' : file.id == 1}">
<td class="text-center col-xs-1">{{ file.temporaryId }}</td>
<td class="view-orphan uploadResumeTableCellOverFlow col-xs-4">
{{ file.attributes.name }}
</td>
<td class="text-center col-xs-1">{{file.totalScore}}</td>
<td class="text-center col-xs-1" ng-class= "{'highlighter-QuickScore' : file.attributes.areQuickScoreFieldsMissing}">{{file.attributes.quickScore}}</td>
<td class="text-center col-xs-5">
<button class="btn btn-labeled btn-info" title="Annotate Un-annotated Words" data-ng-click="getOrphans($index)">
<i class="fa fa-eye" aria-hidden="true"></i>
</button>
<button class="btn btn-labeled btn-info" title="Promote to Gold Standard" ng-disabled="!file.attributes.isModelHtmlPresent" data-ng-click="markAsGoldStd(file.attributes.name)">
<i class="fa fa-share" aria-hidden="true"></i>
</button>
<button class="btn btn-labeled btn-info" title="Delete from Corpus" data-ng-click="deleteResume(file.attributes.name)">
<i class="fa fa-trash" aria-hidden="true"></i>
</button>
<button class="btn btn-labeled btn-info" title="Add to Tracker" ng-disabled="!file.attributes.isModelHtmlPresent || !isjdDeleted || !jdSelected"
data-ng-click="moveToJobDescription(file.attributes.name)">
<i class="fa fa-check-square" aria-hidden="true"></i>
</button>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
here is my UI view how its showing currently.
if you didnt understand question please ask me, thanks you

you can keep your scroll bar at the top position :
$('html, body').animate({
scrollTop: 0
}, 1000);