We Keep Coding

search and mark words in a pair tag textarea

I tried accessing a textarea tag to search and highlight the text but it didn't work. I'm a newbie, hope you guys can help me.
i want to intervene in textarea tag to search word and highlight word but its quite difficult for a newbie like me, i succeeded when it is a text but its in editor not.
i want to intervene in textarea tag to search word and highlight word but its quite difficult for a newbie like me, i succeeded when it is a text but its in editor not.
i want to intervene in textarea tag to search word and highlight word but its quite difficult for a newbie like me, i succeeded when it is a text but its in editor not.
function findThe(a, b){
console.log(a);
var x = document.getElementById("myTextarea");
if(a){
// var wholeWordOnly = new RegExp("\\g" + a + "\\g","ig"); //Matches whole word only
// var anyCharacter = new RegExp("\\g[" + a + "]\\g","ig"); //Matches any word with any of search chars characters
var x = document.getElementById("myTextarea");
var c = (typeof(b) !== "undefined" && b != null) ? b : document.getElementsByTagName('body')[0];
var d = new RegExp(a, "ig");
var matches = c.innerText.match(d);
if(matches){
if(typeof(document.querySelector('.highlighted')) !== "undefined" && document.querySelector('.highlighted') != null){
for(var i = 0; i < document.querySelectorAll('.highlighted').length; i++){
document.querySelectorAll('.highlighted')[i].outerHTML = document.querySelectorAll('.highlighted')[i].innerText;
}
}
c.innerHTML = c.innerHTML.replace(d, "<span class='highlighted'>" + a + "</span>");
if(document.querySelector('.highlighted')){
document.querySelector('.highlighted').scrollIntoView();
}
return true;
}
}
return false;
}
function fSearch(){
if(!findThe(document.getElementById('search-term').value)){
alert("No results found");
}
}
.highlighted{background-color:#f1f100}
<?php
$text = '<h1>At dolor cumque hic dolorem commodi eos facilis ipsum. </h1>
<p>Et odio doloremque est harum possimus est tempore culpa est dolores labore et molestiae laudantium in nesciunt veniam! Ut totam laboriosam ea iste suscipit a voluptate sunt ut eveniet rerum? Ea iusto quia eos possimus nostrum 33 harum dignissimos. Qui dolores possimus <em>Eos galisum rem sequi laboriosam non consequatur voluptatem</em>. Hic minus temporibuseos minima aut eligendi repellat. Qui consequuntur dicta et obcaecati aspernatur sed temporibus iusto non reiciendis ipsum. Et autem excepturi est galisum obcaecati Aut enim ea libero ipsam ab officia consequuntur. Ut voluptatem ipsa eum quibusdam ipsa et laboriosam quibusdam id consectetur voluptatem et fugit dignissimos cum architecto quaerat. </p>
<ul>
<li>Ut fuga omnis eos internos autem! </li>
<li>Quo nobis nihil sit debitis rerum et libero accusamus. </li>
<li>Est enim similique ut deserunt voluptatem qui sint mollitia. </li>
<li>Qui molestiae tempore ut laboriosam dolorum a libero aspernatur qui sapiente voluptas. </li>
</ul>
<h2>Et similique libero est dolorem ipsam et impedit repudiandae. </h2>
<p>Ut deserunt deleniti non voluptas autem in numquam nulla. Qui voluptates voluptatem quo eligendi debitis non incidunt officiis quo rerum debitis ut eaque animi. Non dolorem cumque qui quasi animi sed animi enim. Ad sint reiciendis ex iste esse ea rerum ipsum aut ipsam similique sed accusantium animi eos doloremque totam? Eum blanditiis animi et consequatur tempora Aut necessitatibus. Rem ullam omnis et facere obcaecati <strong>Et doloribus hic quisquam earum qui autem odio et labore enim</strong> qui velit vero. Quo dolore dolor qui ratione nulla sed optio nemo. Non voluptates culpa aut quasi aliquam et quibusdam eaque et laudantium nesciunt. </p>
<ol>
<li>Ut molestiae distinctio qui velit tenetur. </li>
<li>Qui possimus excepturi a maiores repellendus sit quibusdam sunt hic nesciunt illo. </li>
<li>Rem dolor tempora sed molestiae quae et quaerat voluptatem. </li>
<li>Ex reiciendis soluta quo iusto omnis aut laboriosam repudiandae et cumque unde. </li>
<li>Non porro aliquid aut nostrum optio. </li>
</ol>
<dl>
<dt><dfn>Et voluptatum sint qui nulla voluptas. </dfn></dt>
<dd>Id doloribus nemo est numquam doloremque. </dd>
<dt><dfn>In minus atque quo debitis numquam. </dfn></dt>
<dd>Non cumque sunt et sunt cumque ex commodi exercitationem! </dd>
<dt><dfn>Et tempora quis et sunt incidunt. </dfn></dt>
<dd>Eos voluptatem asperiores hic iure facere et odio officia? </dd>
<dt><dfn>Sit velit itaque. </dfn></dt>
<dd>Ea corrupti voluptate et dolore iure sed dignissimos accusamus. </dd>
</dl>
<h3>Eum ducimus labore vel doloribus nihil sed blanditiis repellat. </h3>
<p>Non exercitationem voluptatem <em>Nam nulla eum facere Quis ut magni quidem</em> rem facere incidunt. Delectus molestiae id quae ullam qui laboriosam itaque. Vel dolorem adipisci aut dicta assumenda quo enim voluptatibus non recusandae voluptatem. Et doloremque excepturi et minus suscipit est consequatur eveniet qui maiores natus. Et temporibus quam qui atque laborum qui quia voluptas qui iusto quis. At quia sunt ad quae autem aut odit dolores aut rerum quisquam vel repellendus expedita ad deserunt consequatur ut dolor odio. Qui labore odio et pariatur veniamsed animi. Ut dolorem corrupti et natus iure sed expedita tenetur et iure saepe et Quis soluta aut voluptatem officiis. </p>
<blockquote cite="https://www.loremipzum.com">Et modi modi eos voluptas doloribus non nisi culpa et esse eaque! </blockquote>
<pre><code><!-- Et sunt odit vel corporis reprehenderit. --><br><corrupti>Qui asperiores incidunt.</corrupti><br><sint>Non omnis commodi est tempora quia.</sint><br><hic>Aut omnis molestias nam doloribus numquam a voluptas consequatur.</hic><br><et>Et repudiandae error At aliquid modi.</et><br></code></pre>';
?>
<textarea class="form-control tinymce-field-content" id="meta_content" name="content"><?= $text;
?> </textarea>
<form action="#">
<input type="text" id="search-term" />
<button type="submit" id="search-button" onclick="fSearch()">Search!</button>
</form>
.highlighted{background-color:#f1f100};

How to scroll to top of webpage page at load on page with autofocus elements

I'm trying to display pages with autofocus elements, but have the pages display starting at the very top of the page. However, the autofocus seems to focus after the onload event fires. The following snippet of code demonstrates this behavior. Is there a way to trigger the scrolling after the autofocus scroll?
I don't have a lot of control over the html, so I'm limited in my ability to edit it, but I can inject js into it. My backup is to use js to query the page for elements with autofocus, strip the autofocus from the element, and then do a element.focus({preventScroll: true}) on load.
<!DOCTYPE html><html>
<head><meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>demo</title>
</head>
<body><article class="markdown-body">
<!-- This next line should scroll to the top of the page on load, but the page still autofocuses on the button after load -->
<script>
function scrollToTopOfPage() {window.scrollTo(0,0);}
window.onload=scrollToTopOfPage()
</script>
<h1 id="lorem-ipsum">Lorem Ipsum<a class="headerlink" href="#lorem-ipsum" title="Permanent link"></a></h1>
<p>Quis sit adipisci unde tempore corporis fugit. Ad commodi illo numquam nam adipisci nihil. Totam debitis quia quos eius et. Quo dolor consequatur itaque temporibus fugit qui.</p>
<p>Ratione quos nesciunt quas consequuntur consequatur. Sit cupiditate veniam soluta tempora eum in sequi modi. Consequatur animi consequatur est omnis sint. Sunt in omnis amet et ut distinctio et quia. Non repellendus ut aut aliquam vitae esse dolores non.</p>
<p>Id aut quo repellendus est quasi esse sunt ipsum. Vitae quo cupiditate voluptas ut quis error quibusdam eveniet. Totam quaerat ipsam voluptas. Necessitatibus molestias aut ex non. Similique et iusto aperiam eveniet debitis quas quis fuga. Debitis sapiente eius est dolorem.</p>
<p>Laudantium eum expedita et. Hic voluptatem ut nulla magni quae. Non tempore vel sapiente enim aut. Molestiae qui rerum reiciendis fugit quasi enim. Atque ipsum et sint omnis fugiat facere assumenda.</p>
<p>Quidem qui in neque itaque praesentium rerum molestias exercitationem. Veritatis ipsam in expedita magni quibusdam maxime. Consectetur aut nesciunt reiciendis maxime quia dolorem. Fuga tempore et veritatis aut.</p>
<p>Asperiores dicta sit consectetur. Id omnis rem et qui ullam nesciunt. Et officiis amet deleniti aut sint sunt nemo. Ullam recusandae et debitis eaque rem itaque et pariatur. Beatae at aut fugiat tempora aliquid suscipit. Incidunt sapiente ut sed debitis.</p>
<p>Incidunt magni earum voluptatum dolorem. Amet ducimus harum possimus doloremque aut. Consequatur consequuntur tempora omnis tempora rem ea. Eaque ut ea illum sed eligendi autem quae. Ipsam occaecati dolor dolorem ea est. Modi vitae in eaque voluptatem.</p>
<p>Consequatur sit suscipit dolorum velit sit voluptatem quo. Porro ut inventore veniam cumque et in voluptas. Cum ipsa dicta dolorum aut. Pariatur vitae atque eum et provident id officia ducimus. Non et a molestias consequatur.</p>
<p>Quo nulla praesentium at neque iste alias animi placeat. Quas numquam aut illum vel facere dignissimos rerum. Id laboriosam expedita est maxime ullam sint.</p>
<p>Culpa sapiente est nostrum pariatur modi numquam distinctio sed. Eaque amet vitae nemo enim ea qui. Quibusdam in quas quasi suscipit rerum dolores consequatur. Sapiente minus dolorem sint. Est quos ipsa mollitia qui.</p>
<h1 id="buttons">Buttons<a class="headerlink" href="#buttons" title="Permanent link"></a></h1>
<p>
<button autofocus>Ok</button>
<button>Cancel</button>
<button onclick=scrollToTopOfPage()>Scroll to top of page</button>
</p>
</article></body>
</html>

Stop autoplay youtube video when paused manually

I am using autoplay youtube video when its visible on scroll, but if I pause it manually and scroll the video off-screen, and scroll back to video it starts again.
What I want is, If I pause it manually, it should not play again even scrolling, and when i play it again, it should follow the same function of play/pause when scroll.
Please note: The snippet inn't working but if you copy the code locally, it will work.
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
// Load the IFrame Player API code asynchronously.
var player;
// this function gets called when API is ready to use
var playerInfoList = [{
id:'player',
userPaused: false
},{
id:'player1',
userPaused: false
}
];
function onYouTubePlayerAPIReady() {
// create the global player from the specific iframe (#video)
for(var i = 0; i < playerInfoList.length;i++) {
var curplayer = playerInfoList[i];
var curpause = curplayer.userPaused;
var curplayer = curplayer.id;
player = new YT.Player(curplayer, {
events: {
// call this function when player is ready to use
'onReady': onPlayerReady,
'onStateChange' : onPlayerChange
}
});
// console.log(player.getIframe())
}
}
function onPlayerReady(event) {
var curplayer = event.target.a;
// console.log(event);
jQuery(window).scroll(function() {
$offtop = jQuery(curplayer).offset().top;
$wofftop = jQuery(window).scrollTop();
// console.log(document.activeElement);
// console.log($offtop, $wofftop)
// console.log(curplayer.id+'>'+($offtop-500));
if (($wofftop > $offtop - 500) && ($wofftop < jQuery(curplayer).offset().top + 200) && !jQuery("body").hasClass("paused")){
event.target.playVideo();
} else {
//console.log(curplayer+" pausing... ");
jQuery( "body" ).blur();
event.target.pauseVideo();
//jQuery("body").removeClass("paused");
}
});
// bind events
}
function onPlayerChange(event) {
console.log(event.data);
if (event.data == '1') {
jQuery("body").removeClass("paused");
}
if (event.data == '2') {
// jQuery("body").addClass("paused");
}
}
window.addEventListener('blur',function(){
if(document.activeElement.id == 'player'){
console.log('the "play" button *might* have been clicked');
jQuery("body").addClass("paused");
}
});
// Inject YouTube API script
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
</script>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, iusto amet quisquam veniam, temporibus nesciunt ipsa ullam corporis aut, quia quis enim nihil dolores officia modi impedit odio? Non, vel.</div>
<div>Magnam molestias blanditiis voluptatum sequi tenetur veritatis ipsam, ea laboriosam, nihil eum assumenda fugiat minus, velit quia quaerat quasi ab dignissimos, delectus praesentium veniam inventore. Aut odit vero perspiciatis asperiores!</div>
<div>Debitis ab hic sed quis illum voluptatem alias, perspiciatis delectus vel voluptatibus quaerat corporis fugit officia, laudantium velit, vero atque ullam placeat a quae quisquam dolor ut repellendus! Nostrum, dolore!</div>
<div>Accusamus facilis ipsum nihil eveniet aliquid fugiat rem ratione assumenda modi ut, odio nobis suscipit. Nam sit, explicabo repellat excepturi eum cum accusantium voluptatibus, dolore expedita veritatis nisi omnis maxime!</div>
<div>Rem iste, odio quas minus porro commodi, quisquam, esse animi saepe architecto molestiae voluptate quo. Perferendis amet quisquam dolores sunt laudantium, libero minima dignissimos asperiores itaque sapiente nulla nisi at!</div>
<div>Impedit omnis rem aut ea fugiat tenetur, aperiam asperiores maxime eaque totam unde nam blanditiis aliquid officia quae quas ipsum, ex tempora illum repudiandae! Velit impedit nihil assumenda animi dolorem.</div>
<div>At quia dolore facere, quisquam corrupti accusamus ut. Pariatur beatae earum modi quis vitae. Voluptate reprehenderit labore quos ut porro pariatur soluta, veniam laudantium beatae perferendis, recusandae molestias impedit possimus.</div>
<div>Perferendis velit facere molestias, minima quae cumque repellendus rerum error ab labore? Quaerat quasi accusantium facere voluptates maiores. In deserunt, molestias, distinctio aut reprehenderit dignissimos placeat doloremque corporis voluptas delectus!</div>
<div>Expedita, amet, quaerat. Tempore, sapiente inventore nostrum sunt, accusamus ipsam ad natus consequatur error sequi ratione voluptatem adipisci dolor facilis nesciunt magnam libero quisquam. Explicabo laboriosam rem magni reprehenderit eos.</div>
<div>Sed id aut assumenda incidunt debitis ratione, earum voluptate ex excepturi iusto totam temporibus quisquam unde eos nemo explicabo deleniti ab rerum tempore aliquid laboriosam? Labore officia numquam ex voluptas.</div>
<div>Quod in voluptatum officiis vitae est sit modi, sapiente pariatur molestiae ipsum dolore atque quibusdam molestias, quam nemo libero aperiam laborum. Minus dignissimos dolores omnis asperiores, blanditiis magnam. Est, impedit.</div>
<div>Reiciendis nam ut laboriosam voluptatum soluta optio dolore quidem asperiores illum quia debitis quae ab, neque repellat maiores sed ea voluptas perferendis excepturi labore velit, quaerat, odio. Quae, minima, soluta.</div>
<div>Quasi nemo fuga ad ullam blanditiis velit tempore, accusantium, tenetur ipsa magni amet corporis cupiditate ipsum deserunt dignissimos, quos! Explicabo adipisci modi rem. Voluptatibus quibusdam officia laudantium, omnis nihil. Veniam!</div>
<div>Doloribus sunt reprehenderit odit, hic magni beatae architecto neque accusamus id? Temporibus eveniet officia quae voluptate eius earum optio voluptates et error, ad quasi! Saepe cupiditate cumque dolore debitis incidunt.</div>
<div>Deleniti dolorum saepe itaque ab dolorem amet, quidem aliquam molestias blanditiis molestiae id. Fugiat ut tempore nisi voluptatem nulla exercitationem aut, molestiae labore officiis temporibus. Sapiente atque tempora suscipit doloribus.</div>
<div>Quaerat cupiditate voluptatum iusto dolore dolorum, sequi reprehenderit, aliquam, totam quas velit impedit, non facilis suscipit quibusdam recusandae iure doloremque a deleniti quis. Nobis ullam inventore alias veniam. Iure, excepturi.</div>
<div>Voluptates dolore unde accusantium enim, sequi, nesciunt sunt amet. Omnis molestias hic soluta itaque magnam quia aperiam quisquam, similique, facere consequuntur fugiat eaque nam ratione assumenda, voluptates eum? Et, assumenda.</div>
<div>Voluptatum distinctio quos pariatur, quia officiis dignissimos ratione nam, laudantium eum ut doloremque debitis ipsam deserunt sequi, libero quae vitae cumque nihil non. Cumque fugit commodi veniam esse molestiae facere.</div>
<div>Consequuntur nemo est, temporibus placeat quod sequi aliquam error ea quam, animi, nostrum, voluptatem commodi quis eligendi maiores natus soluta laborum ex. Ratione necessitatibus qui optio alias harum. Quos, id.</div>
<div>Veritatis, doloremque obcaecati blanditiis minus incidunt autem suscipit modi, rem aliquid nemo deserunt nobis quibusdam optio vero temporibus cumque? Velit, aspernatur aliquam enim dolores, officiis nihil ab vero minima nesciunt.</div>
<div>Illo, alias aperiam. Ipsam deserunt ab illo eaque voluptatem numquam debitis cum nostrum cupiditate dolore minima voluptatum, repellendus vel illum veniam similique nobis dignissimos culpa tenetur labore veritatis tempore aliquid.</div>
<div>Blanditiis in, ut dolores magni pariatur corporis unde reprehenderit, quo ea ipsum fugit iusto at voluptatibus eum quisquam excepturi error sunt. Culpa modi pariatur ipsam beatae magni ratione eos quod.</div>
<div>Obcaecati commodi, quas. Fuga, consequuntur suscipit et consectetur temporibus molestiae necessitatibus quisquam corrupti unde architecto odio ab obcaecati quasi repudiandae optio iste reprehenderit, facere quaerat, harum reiciendis ratione praesentium sapiente.</div>
<div>Dolorum sed eaque quis nesciunt, voluptate assumenda veritatis praesentium obcaecati officiis sapiente deserunt harum ipsam dignissimos, doloribus exercitationem. Numquam minima et, nemo totam vitae. Aut, eum! Aut vitae, quod odit!</div>
<div>Aliquid dicta reprehenderit ea deserunt quis mollitia animi officiis dolor corporis vitae perferendis natus, illo ducimus dolore fugit eos facilis vero, voluptatem porro, ad. Ipsa assumenda animi, et magni dolores?</div>
<div>Hic recusandae repellendus molestiae harum modi magnam provident porro voluptate. Expedita ipsa voluptatibus earum, provident aspernatur mollitia accusamus quibusdam dignissimos qui! Cum quibusdam est esse. Quasi quo officia earum possimus?</div>
<div>Sint accusantium esse sapiente eum mollitia nihil ducimus, est fuga id neque nisi quaerat iste officia placeat quas, maxime et ea similique delectus aut, labore earum. Asperiores quos ad quaerat!</div>
<div>Sint sequi ea optio minus quia vitae doloribus. Repudiandae minus commodi quia consequatur sequi dolorum natus reiciendis aspernatur nam ipsam dolor, consectetur quod harum, odit, cumque id labore facilis quasi.</div>
<div>Tenetur sequi fugiat et nobis deserunt, voluptatibus! Soluta quaerat iste nesciunt expedita labore, repudiandae ex optio provident officia consequatur tenetur esse illo nihil, unde excepturi fugiat perferendis numquam similique nam?</div>
<div>Consequuntur assumenda vero alias. Repellendus dolore voluptas obcaecati tempore debitis, expedita id deserunt illum numquam. Alias dolorem cum ea repellendus explicabo fuga, odit corrupti voluptate esse magnam unde, quo perspiciatis.</div>
<div>Est voluptatem neque nam aliquid tenetur perferendis ullam reprehenderit, eius provident delectus quisquam, facilis quia natus quo itaque nisi deserunt at porro. Quidem numquam eaque porro esse dolores fugiat debitis?</div>
<div>Enim iste veniam voluptates odio voluptatem blanditiis, commodi dolorem eum quo vel rem nostrum in eligendi ipsa, repudiandae maxime amet. Doloremque ut eum, at, libero quo iste ipsa eveniet cupiditate?</div>
<div>Asperiores sint adipisci vero saepe quis quisquam eius earum quas, veritatis unde voluptates animi excepturi ipsum blanditiis omnis facilis quaerat nisi amet? Laboriosam quis quas, sed, illo repudiandae odio blanditiis!</div>
<div>Non, animi, amet? Rem qui tempora reprehenderit eos velit dolore, cum ut vitae minima? Quisquam veniam, doloremque eligendi fugiat aliquid minima! Ut sunt esse voluptatem nulla, iure harum sint deserunt!</div>
<div>Ipsa, voluptatibus praesentium fugit modi facere error saepe deserunt. Ea voluptatibus, repellat sunt. Cum aperiam rerum corrupti officiis distinctio, at quis veniam neque dolor, quia ipsum porro mollitia molestiae dicta?</div>
<div>Neque in soluta dolores, voluptate, autem debitis! Adipisci omnis qui, aut suscipit dolore delectus magnam veniam, sit aliquid id quaerat ut assumenda et itaque quam ipsum, repellendus nihil eaque natus.</div>
<div>Adipisci, quod, eaque nulla pariatur laborum deserunt cum ratione dolorum ut vero accusamus nisi aut alias dolor distinctio mollitia itaque aliquid ea incidunt. Explicabo animi odit minus esse doloremque cupiditate.</div>
<div>Cupiditate eum nam inventore labore doloremque possimus ullam, alias sed commodi perspiciatis aut, sunt quos? Optio unde excepturi dolore ex aut facilis eveniet consectetur sit, esse autem iure, nesciunt et.</div>
<div>Aut sint, laborum minus autem quisquam molestias quia fugiat itaque nam fuga labore, possimus iusto sunt. Architecto, placeat libero. Esse velit natus, culpa tenetur praesentium maiores. Inventore delectus, temporibus enim.</div>
<div>Repudiandae tempora dolore quam a. Assumenda aliquid ad reprehenderit amet vero architecto, quam sequi id eveniet natus vitae minima, velit, nulla voluptatem voluptate necessitatibus tempora repellendus ullam, iusto temporibus pariatur!</div>
<div>Tempora sapiente doloribus, illum magnam? Commodi culpa porro illum adipisci eveniet nulla temporibus reprehenderit impedit corrupti distinctio vel, ducimus numquam quasi deserunt accusantium eos sed mollitia sint neque ad vero.</div>
<div>Quas recusandae, quaerat quia a eaque nemo. Labore qui consequatur perferendis inventore, distinctio asperiores quam dolore! Culpa rem a tenetur odit, quisquam atque incidunt voluptatem animi recusandae quam, saepe vero.</div>
<div>Ea nostrum, nesciunt odio ducimus impedit molestias magni delectus sequi numquam esse possimus aliquam culpa laboriosam, rem a iusto dicta fugit, ratione? Pariatur quos distinctio blanditiis, vero laudantium quidem, libero.</div>
<div>Est adipisci maiores et nulla. Laboriosam veniam, dolorum esse totam repellendus necessitatibus molestiae praesentium, consequuntur, accusamus aliquam officiis, accusantium. Sint sapiente esse qui veniam accusamus delectus deserunt libero odio necessitatibus!</div>
<div>Commodi blanditiis laudantium debitis sequi, sapiente porro deserunt eaque, explicabo mollitia nam maiores iusto hic quidem earum! Eligendi mollitia ipsum voluptas unde dolorem recusandae quos ab error deserunt consectetur. Eligendi.</div>
<div>Eius aspernatur voluptates, voluptatibus pariatur fugiat voluptate suscipit corporis rem dolore repellendus hic quaerat quisquam, accusamus animi minus, quae in sunt. Repudiandae ad sunt autem iusto, quisquam pariatur totam, libero.</div>
<div>Natus, nihil, assumenda. Consequuntur, cumque odit odio placeat perferendis tempore architecto cupiditate natus nesciunt modi officiis facilis dolores, mollitia fuga magni maxime ad reiciendis, debitis sit voluptate minus sapiente praesentium.</div>
<div>Voluptatibus esse magni cupiditate obcaecati porro. Ipsam est modi, veniam libero! Laboriosam iste dolore tenetur nobis sequi eligendi vel dolorem, illo soluta minus labore tempore est recusandae, repudiandae, delectus rerum!</div>
<div>Veritatis fugiat, quod hic architecto, laudantium inventore at similique recusandae tempora, rerum deserunt vero voluptas totam aliquam, a harum minus id animi aperiam. Pariatur magni doloribus praesentium inventore illum recusandae?</div>
<div>Vero, cum consequatur qui maiores sit veritatis non harum distinctio, nobis optio ad dicta nostrum placeat vitae similique voluptatem minima quia voluptate magni voluptas officia? Dolor sed quo assumenda debitis.</div>
<iframe id="player" src="https://www.youtube.com/embed/krVkvyQjyBQ?enablejsapi=1&html5=1;&autoplay=1&mute=1" allowfullscreen="" frameborder="0" height="315" width="560"></iframe>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, iusto amet quisquam veniam, temporibus nesciunt ipsa ullam corporis aut, quia quis enim nihil dolores officia modi impedit odio? Non, vel.</div>
<div>Magnam molestias blanditiis voluptatum sequi tenetur veritatis ipsam, ea laboriosam, nihil eum assumenda fugiat minus, velit quia quaerat quasi ab dignissimos, delectus praesentium veniam inventore. Aut odit vero perspiciatis asperiores!</div>
<div>Debitis ab hic sed quis illum voluptatem alias, perspiciatis delectus vel voluptatibus quaerat corporis fugit officia, laudantium velit, vero atque ullam placeat a quae quisquam dolor ut repellendus! Nostrum, dolore!</div>
<div>Accusamus facilis ipsum nihil eveniet aliquid fugiat rem ratione assumenda modi ut, odio nobis suscipit. Nam sit, explicabo repellat excepturi eum cum accusantium voluptatibus, dolore expedita veritatis nisi omnis maxime!</div>
<div>Rem iste, odio quas minus porro commodi, quisquam, esse animi saepe architecto molestiae voluptate quo. Perferendis amet quisquam dolores sunt laudantium, libero minima dignissimos asperiores itaque sapiente nulla nisi at!</div>
<div>Impedit omnis rem aut ea fugiat tenetur, aperiam asperiores maxime eaque totam unde nam blanditiis aliquid officia quae quas ipsum, ex tempora illum repudiandae! Velit impedit nihil assumenda animi dolorem.</div>
<div>At quia dolore facere, quisquam corrupti accusamus ut. Pariatur beatae earum modi quis vitae. Voluptate reprehenderit labore quos ut porro pariatur soluta, veniam laudantium beatae perferendis, recusandae molestias impedit possimus.</div>
<div>Perferendis velit facere molestias, minima quae cumque repellendus rerum error ab labore? Quaerat quasi accusantium facere voluptates maiores. In deserunt, molestias, distinctio aut reprehenderit dignissimos placeat doloremque corporis voluptas delectus!</div>
<div>Expedita, amet, quaerat. Tempore, sapiente inventore nostrum sunt, accusamus ipsam ad natus consequatur error sequi ratione voluptatem adipisci dolor facilis nesciunt magnam libero quisquam. Explicabo laboriosam rem magni reprehenderit eos.</div>
<div>Sed id aut assumenda incidunt debitis ratione, earum voluptate ex excepturi iusto totam temporibus quisquam unde eos nemo explicabo deleniti ab rerum tempore aliquid laboriosam? Labore officia numquam ex voluptas.</div>
<div>Quod in voluptatum officiis vitae est sit modi, sapiente pariatur molestiae ipsum dolore atque quibusdam molestias, quam nemo libero aperiam laborum. Minus dignissimos dolores omnis asperiores, blanditiis magnam. Est, impedit.</div>
<div>Reiciendis nam ut laboriosam voluptatum soluta optio dolore quidem asperiores illum quia debitis quae ab, neque repellat maiores sed ea voluptas perferendis excepturi labore velit, quaerat, odio. Quae, minima, soluta.</div>
<div>Quasi nemo fuga ad ullam blanditiis velit tempore, accusantium, tenetur ipsa magni amet corporis cupiditate ipsum deserunt dignissimos, quos! Explicabo adipisci modi rem. Voluptatibus quibusdam officia laudantium, omnis nihil. Veniam!</div>
<div>Doloribus sunt reprehenderit odit, hic magni beatae architecto neque accusamus id? Temporibus eveniet officia quae voluptate eius earum optio voluptates et error, ad quasi! Saepe cupiditate cumque dolore debitis incidunt.</div>
<div>Deleniti dolorum saepe itaque ab dolorem amet, quidem aliquam molestias blanditiis molestiae id. Fugiat ut tempore nisi voluptatem nulla exercitationem aut, molestiae labore officiis temporibus. Sapiente atque tempora suscipit doloribus.</div>
<div>Quaerat cupiditate voluptatum iusto dolore dolorum, sequi reprehenderit, aliquam, totam quas velit impedit, non facilis suscipit quibusdam recusandae iure doloremque a deleniti quis. Nobis ullam inventore alias veniam. Iure, excepturi.</div>
<div>Voluptates dolore unde accusantium enim, sequi, nesciunt sunt amet. Omnis molestias hic soluta itaque magnam quia aperiam quisquam, similique, facere consequuntur fugiat eaque nam ratione assumenda, voluptates eum? Et, assumenda.</div>
<div>Voluptatum distinctio quos pariatur, quia officiis dignissimos ratione nam, laudantium eum ut doloremque debitis ipsam deserunt sequi, libero quae vitae cumque nihil non. Cumque fugit commodi veniam esse molestiae facere.</div>
<div>Consequuntur nemo est, temporibus placeat quod sequi aliquam error ea quam, animi, nostrum, voluptatem commodi quis eligendi maiores natus soluta laborum ex. Ratione necessitatibus qui optio alias harum. Quos, id.</div>
<iframe id="player1" src="https://www.youtube.com/embed/krVkvyQjyBQ?enablejsapi=1&html5=1;&autoplay=1&mute=1" allowfullscreen="" frameborder="0" height="315" width="560"></iframe>
<div>Veritatis, doloremque obcaecati blanditiis minus incidunt autem suscipit modi, rem aliquid nemo deserunt nobis quibusdam optio vero temporibus cumque? Velit, aspernatur aliquam enim dolores, officiis nihil ab vero minima nesciunt.</div>
<div>Illo, alias aperiam. Ipsam deserunt ab illo eaque voluptatem numquam debitis cum nostrum cupiditate dolore minima voluptatum, repellendus vel illum veniam similique nobis dignissimos culpa tenetur labore veritatis tempore aliquid.</div>
<div>Blanditiis in, ut dolores magni pariatur corporis unde reprehenderit, quo ea ipsum fugit iusto at voluptatibus eum quisquam excepturi error sunt. Culpa modi pariatur ipsam beatae magni ratione eos quod.</div>
<div>Obcaecati commodi, quas. Fuga, consequuntur suscipit et consectetur temporibus molestiae necessitatibus quisquam corrupti unde architecto odio ab obcaecati quasi repudiandae optio iste reprehenderit, facere quaerat, harum reiciendis ratione praesentium sapiente.</div>
<div>Dolorum sed eaque quis nesciunt, voluptate assumenda veritatis praesentium obcaecati officiis sapiente deserunt harum ipsam dignissimos, doloribus exercitationem. Numquam minima et, nemo totam vitae. Aut, eum! Aut vitae, quod odit!</div>
<div>Aliquid dicta reprehenderit ea deserunt quis mollitia animi officiis dolor corporis vitae perferendis natus, illo ducimus dolore fugit eos facilis vero, voluptatem porro, ad. Ipsa assumenda animi, et magni dolores?</div>
<div>Hic recusandae repellendus molestiae harum modi magnam provident porro voluptate. Expedita ipsa voluptatibus earum, provident aspernatur mollitia accusamus quibusdam dignissimos qui! Cum quibusdam est esse. Quasi quo officia earum possimus?</div>
<div>Sint accusantium esse sapiente eum mollitia nihil ducimus, est fuga id neque nisi quaerat iste officia placeat quas, maxime et ea similique delectus aut, labore earum. Asperiores quos ad quaerat!</div>
<div>Sint sequi ea optio minus quia vitae doloribus. Repudiandae minus commodi quia consequatur sequi dolorum natus reiciendis aspernatur nam ipsam dolor, consectetur quod harum, odit, cumque id labore facilis quasi.</div>
<div>Tenetur sequi fugiat et nobis deserunt, voluptatibus! Soluta quaerat iste nesciunt expedita labore, repudiandae ex optio provident officia consequatur tenetur esse illo nihil, unde excepturi fugiat perferendis numquam similique nam?</div>
<div>Consequuntur assumenda vero alias. Repellendus dolore voluptas obcaecati tempore debitis, expedita id deserunt illum numquam. Alias dolorem cum ea repellendus explicabo fuga, odit corrupti voluptate esse magnam unde, quo perspiciatis.</div>
<div>Est voluptatem neque nam aliquid tenetur perferendis ullam reprehenderit, eius provident delectus quisquam, facilis quia natus quo itaque nisi deserunt at porro. Quidem numquam eaque porro esse dolores fugiat debitis?</div>
<div>Enim iste veniam voluptates odio voluptatem blanditiis, commodi dolorem eum quo vel rem nostrum in eligendi ipsa, repudiandae maxime amet. Doloremque ut eum, at, libero quo iste ipsa eveniet cupiditate?</div>
<div>Asperiores sint adipisci vero saepe quis quisquam eius earum quas, veritatis unde voluptates animi excepturi ipsum blanditiis omnis facilis quaerat nisi amet? Laboriosam quis quas, sed, illo repudiandae odio blanditiis!</div>
<div>Non, animi, amet? Rem qui tempora reprehenderit eos velit dolore, cum ut vitae minima? Quisquam veniam, doloremque eligendi fugiat aliquid minima! Ut sunt esse voluptatem nulla, iure harum sint deserunt!</div>
<div>Ipsa, voluptatibus praesentium fugit modi facere error saepe deserunt. Ea voluptatibus, repellat sunt. Cum aperiam rerum corrupti officiis distinctio, at quis veniam neque dolor, quia ipsum porro mollitia molestiae dicta?</div>
<div>Neque in soluta dolores, voluptate, autem debitis! Adipisci omnis qui, aut suscipit dolore delectus magnam veniam, sit aliquid id quaerat ut assumenda et itaque quam ipsum, repellendus nihil eaque natus.</div>
<div>Adipisci, quod, eaque nulla pariatur laborum deserunt cum ratione dolorum ut vero accusamus nisi aut alias dolor distinctio mollitia itaque aliquid ea incidunt. Explicabo animi odit minus esse doloremque cupiditate.</div>
<div>Cupiditate eum nam inventore labore doloremque possimus ullam, alias sed commodi perspiciatis aut, sunt quos? Optio unde excepturi dolore ex aut facilis eveniet consectetur sit, esse autem iure, nesciunt et.</div>
<div>Aut sint, laborum minus autem quisquam molestias quia fugiat itaque nam fuga labore, possimus iusto sunt. Architecto, placeat libero. Esse velit natus, culpa tenetur praesentium maiores. Inventore delectus, temporibus enim.</div>
<div>Repudiandae tempora dolore quam a. Assumenda aliquid ad reprehenderit amet vero architecto, quam sequi id eveniet natus vitae minima, velit, nulla voluptatem voluptate necessitatibus tempora repellendus ullam, iusto temporibus pariatur!</div>
<div>Tempora sapiente doloribus, illum magnam? Commodi culpa porro illum adipisci eveniet nulla temporibus reprehenderit impedit corrupti distinctio vel, ducimus numquam quasi deserunt accusantium eos sed mollitia sint neque ad vero.</div>
<div>Quas recusandae, quaerat quia a eaque nemo. Labore qui consequatur perferendis inventore, distinctio asperiores quam dolore! Culpa rem a tenetur odit, quisquam atque incidunt voluptatem animi recusandae quam, saepe vero.</div>
<div>Ea nostrum, nesciunt odio ducimus impedit molestias magni delectus sequi numquam esse possimus aliquam culpa laboriosam, rem a iusto dicta fugit, ratione? Pariatur quos distinctio blanditiis, vero laudantium quidem, libero.</div>
<div>Est adipisci maiores et nulla. Laboriosam veniam, dolorum esse totam repellendus necessitatibus molestiae praesentium, consequuntur, accusamus aliquam officiis, accusantium. Sint sapiente esse qui veniam accusamus delectus deserunt libero odio necessitatibus!</div>
<div>Commodi blanditiis laudantium debitis sequi, sapiente porro deserunt eaque, explicabo mollitia nam maiores iusto hic quidem earum! Eligendi mollitia ipsum voluptas unde dolorem recusandae quos ab error deserunt consectetur. Eligendi.</div>
<div>Eius aspernatur voluptates, voluptatibus pariatur fugiat voluptate suscipit corporis rem dolore repellendus hic quaerat quisquam, accusamus animi minus, quae in sunt. Repudiandae ad sunt autem iusto, quisquam pariatur totam, libero.</div>
<div>Natus, nihil, assumenda. Consequuntur, cumque odit odio placeat perferendis tempore architecto cupiditate natus nesciunt modi officiis facilis dolores, mollitia fuga magni maxime ad reiciendis, debitis sit voluptate minus sapiente praesentium.</div>
<div>Voluptatibus esse magni cupiditate obcaecati porro. Ipsam est modi, veniam libero! Laboriosam iste dolore tenetur nobis sequi eligendi vel dolorem, illo soluta minus labore tempore est recusandae, repudiandae, delectus rerum!</div>
<div>Veritatis fugiat, quod hic architecto, laudantium inventore at similique recusandae tempora, rerum deserunt vero voluptas totam aliquam, a harum minus id animi aperiam. Pariatur magni doloribus praesentium inventore illum recusandae?</div>
<div>Vero, cum consequatur qui maiores sit veritatis non harum distinctio, nobis optio ad dicta nostrum placeat vitae similique voluptatem minima quia voluptate magni voluptas officia? Dolor sed quo assumenda debitis.</div>

Here i got the full working code.
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
var player;
var playerInfoList = ['player','player1'];
function onYouTubePlayerAPIReady() {
// create the global player from the specific iframe (#video)
for(var i = 0; i < playerInfoList.length;i++) {
var curplayer = playerInfoList[i];
player = new YT.Player(curplayer, {
events: {
// call this function when player is ready to use
'onReady': onPlayerReady,
'onStateChange' : onPlayerChange
}
});
}
}
function onPlayerReady(event) {
var curplayer = event.target.a;
var status = event.target;
jQuery(window).scroll(function() {
$offtop = jQuery(curplayer).offset().top;
$wofftop = jQuery(window).scrollTop();
$winnerheight = jQuery(window).innerHeight();
$calcHeight = $winnerheight - 200;
if (($wofftop > $offtop - $calcHeight) && ($wofftop < $offtop + 200) && !jQuery(curplayer).hasClass("paused")){
event.target.playVideo();
} else {
event.target.pauseVideo();
}
});
}
function onPlayerChange(event) {
var curplayer = event.target.a
if (document.activeElement.id === curplayer.id) {
if (event.data === 1) {
jQuery(curplayer).removeClass("paused");
} else if (event.data === 2) {
jQuery(curplayer).addClass("paused");
}
$(curplayer).blur();
}
}
// Inject YouTube API script
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
</script>

Add and remove classes jQuery

Im showing a preview for a news post, and when the user clicks on read more (or the whole div, actually) it should open in a full-screen manner. Which it does. But when I try to close it, it doesnt work. Its like it doesnt want to remove the class again.
TL;DR:
The on click event for the second function does not execute.
Here's my code:
/* NEWS */
$('.news-entry').on('click', function() {
$(this).addClass('open');
$(this).find('.close-btn').addClass('display-close-btn');
$(this).find('.news-all-text').addClass('display-all-text');
$(this).find('.news-text').removeClass('news-read-more');
$('html, body').animate({
scrollTop: $(this).find(".scrollTo").offset().top - 20
}, 600);
});
/* NEWS CLOSE BTN */
$('.close-btn').on('click', function() {
$('.news-entry').removeClass('open');
$('.close-btn').removeClass('display-close-btn');
$('.news-full-text').removeClass('display-full-text');
$('.news-text').addClass('news-read-more-btn');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="section-news">
<div class="news-entry">
<div class="news-image">
<div class="entry-number">25</div>
<div class="horizontal-hr"></div>
<img src="img/news/2.png" />
<div class="close-btn">
<button class="circle scaleUp" data-animation="scaleDown" data-remove="3000"></button>
</div>
</div>
<div class="news-text scrollTo">
<p class="news-small-title">Doers - News</p>
<h2 class="news-title">Doers is Looking For a New Junior Designer</h2>
<hr class="news-hr"></hr>
<p class="news-teaser-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
<p class="news-all-text">
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia
animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda
est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis
voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
<br />Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum
necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
</p>
<p class="news-read-more">Read More</p>
</div>
</div>
<div class="news-entry">
<div class="news-image">
<div class="entry-number">24</div>
<div class="horizontal-hr"></div>
<img src="img/news/1.png" />
<div class="close-btn">
<button class="circle scaleUp" data-animation="scaleDown" data-remove="3000"></button>
</div>
</div>
<div class="news-text scrollTo">
<p class="news-small-title">Doers - News</p>
<h2 class="news-title">Say ‘Hi’ to Our New Intern</h2>
<hr class="news-hr"></hr>
<p class="news-teaser-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
<p class="news-all-text">
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia
animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda
est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis
voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
<br />Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum
necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
<br />Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum
necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
</p>
<p class="news-read-more">Read More</p>
</div>
</div>
<div class="news-entry">
<div class="news-image">
<div class="entry-number">23</div>
<div class="horizontal-hr"></div>
<img src="img/news/3.png" />
<div class="close-btn">
<button class="circle scaleUp" data-animation="scaleDown" data-remove="3000"></button>
</div>
</div>
<div class="news-text scrollTo">
<p class="news-small-title">Doers - News</p>
<h2 class="news-title">Winter Holiday - What's Your Top Wish?</h2>
<hr class="news-hr"></hr>
<p class="news-teaser-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
<p class="news-all-text">
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia
animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis.
<p class="news-read-more">Read More</p>
</div>
</div>
</div>
<!-- END JOURNAL ENTRIES -->
When I inspect it, I can see that something happens to .news-entry (it blinks?).
What could be wrong?

Your Problem: .close-btn is in .news-entry. So when you click in close button, after calling close button click function it will also call new entry click function. Solution: move .close-btn outside of .news-entry or use return false in close button click function.
You can try this DEMO LINK HERE
.Update the script...
/* NEWS CLOSE BTN */
$('.close-btn').on('click', function() {
$('.news-entry').removeClass('open');
$('.close-btn').removeClass('display-close-btn');
$('.news-full-text').removeClass('display-full-text');
$('.news-text').addClass('news-read-more-btn');
return false; // add this line.
});

With that little info I can't help you, consider making an small jsfiddle with your code to find the issue.
But here are some steps to debug it:
Check for errors on the console: you could have syntax errors and the output from the console will show that.
Confirm the close button click event is triggering: Add a console.log to the function and see if it is actually triggering.
If it is not triggering review the class selector and the markup, to make sure the click is not happening on another element on top of the button.
Manually remove the classes from you elements(using the inspector tools in your browser) to see if that provides you the expected result. There's a chance the code is executing and the classes are removed/added but the result is not the expected.
Basically get familiar with the debugging tools for web, specially the console.

<div id="section-news">
<!--add id-->
<div class="news-entry" id="news-entry_1">
<div class="news-image">
<div class="entry-number">25</div>
<div class="horizontal-hr"></div>
<img src="img/news/2.png" />
<div class="close-btn" id="close-btn_1"><button class="circle scaleUp" data-animation="scaleDown" data-remove="3000"></button>
</div>
</div>
<!--add id-->
<div class="news-text scrollTo" id="news-text_1">
<p class="news-small-title">Doers - News</p>
<h2 class="news-title">Doers is Looking For a New Junior Designer</h2>
<hr class="news-hr"></hr>
<p class="news-teaser-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
<p class="news-all-text">
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
<br />
Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
</p>
<p class="news-read-more">Read More</p>
</div>
</div>
<!--add id-->
<div class="news-entry" id="news-entry_2">
<div class="news-image">
<div class="entry-number">24</div>
<div class="horizontal-hr"></div>
<img src="img/news/1.png" />
<div class="close-btn" id="close-btn_2"><button class="circle scaleUp" data-animation="scaleDown" data-remove="3000"></button>
</div>
</div>
<div class="news-text scrollTo" id="news-text_2">
<p class="news-small-title">Doers - News</p>
<h2 class="news-title">Say ‘Hi’ to Our New Intern</h2>
<hr class="news-hr"></hr>
<p class="news-teaser-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
<p class="news-all-text">
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
<br />
Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
<br />
Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
</p>
<p class="news-read-more">Read More</p>
</div>
</div>
<div class="news-entry" id="news-entry_3">
<div class="news-image">
<div class="entry-number">23</div>
<div class="horizontal-hr"></div>
<img src="img/news/3.png" />
<div class="close-btn" id="close-btn_3"><button class="circle scaleUp" data-animation="scaleDown" data-remove="3000"></button>
</div>
</div>
<div class="news-text scrollTo" id="news-text_3">
<p class="news-small-title">Doers - News</p>
<h2 class="news-title">Winter Holiday - What's Your Top Wish?</h2>
<hr class="news-hr"></hr>
<p class="news-teaser-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
<p class="news-all-text">
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis.
<p class="news-read-more">Read More</p>
</div>
</div>
</div>
<script>
$('.close-btn').on('click', function() {
//get id for the close button
var index=$(this).attr("id");
var idIndex=index.split("_")
//remove class using id
$('#news-entry_'+idIndex[1]).removeClass('open'); //check if id is getting fetched prperly
$('#close-btn_'+idIndex[1]).removeClass('display-close-btn');
$('#news-full-text_'+idIndex[1]).removeClass('display-full-text');
$('#news-text_'+idIndex[1]).addClass('news-read-more-btn');
});
</script>

Randomly selecting a paragraph from Array list Javascript

I am working on my own Lorem Ipsum generator, with the added bonus of generating the corresponding HTML formatting code in a box beside it.
So, the paragraph is generated via this button
<button id="generate" type="button" onclick="LoremIpsumRandom()">1 Paragraph</button>
and is generated here
<p id="textarea"></p>
function LoremIpsumRandom()
{
//global to store previous random int
_oldInt = null;
var pickRandom = function(paragraphArray)
{
//random index of paragraphArray
var randomInt = Math.floor(Math.random()*paragraphArray.length);
//ensure random integer isn't the same as last
if(randomInt == _oldInt)
pickRandom(paragraphArray);
else{
_oldInt = randomInt;
return paragraphArray[randomInt];
}
}
//your lorem ipsum paragraphs
var paragraphArray = [
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.",
"Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.",
"Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.",
"Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?", "Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?",
"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.",
"Et harum quidem rerum facilis est et expedita distinctio.", "Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.",
"Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.",
"Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat."
];
//update element content (e.g. `<div>` with paragraph
document.getElementById("textarea").innerHTML = pickRandom(paragraphArray);
//document.getElementById("textarea-code").innerText = pickRandom("<P>" + (paragraphArray) + "</P>");
}
No point including the CSS to be honest - it's just standard text boxes and auto-generated buttons.
So, the issue is that although I can generate the normal paragraph in the id="textarea" section, I want to be able to generate a raw HTML version as well (with the paragraph and line breaks code being shown.) So far, I've been able to generate the raw HTML with no issues, but when I added #pixelbobby 's section (which makes sure that when a sentence is selected, the next selection won't be the same, as true randomness can sometimes generate), the code doesn't work. In some instances, it's generated the raw HTML, but the generated paragraph is a different one.
The other functions (generating lists, multi-paragraphed sections and multi-levelled lists) utilise the raw HTML and output correctly, and it all runs smoothly. The raw HTML is always outputted to
<p id="textarea-code"></p>
which is next to the first textarea section.
Can someone tell me how I can modify the script so that the raw HTML part of the script generates the same paragraph as the result of the pickRandom(paragraphArray)
So,
This - document.getElementById("textarea-code").innerText = pickRandom("<P>" + (paragraphArray) + "</P>");
needs to be the same as - document.getElementById("textarea").innerHTML = pickRandom(paragraphArray);
but with the raw HTML specified in the pickRandom() part of the line.
Can anyone help?
Thanks :)

You can save the result of pickRandom(paragraphArray) in a variable and use it twice:
var randomParagraph = pickRandom(paragraphArray); //save the result of pickRandom
document.getElementById("textarea").innerHTML = randomParagraph;
document.getElementById("textarea-code").innerText = "<P>" + randomParagraph + "</P>");