We Keep Coding

Applying changes in HTML for all elements at once

I have an html which contains many (80) small boxes with some info. All these boxes are displayed in grid.
All these boxes and tags are identical just Text is different inside each block. Each box has lets say 3 values: name, email and mobile number.
I want to swap the position of email and mobile number. It will take so much time to do manually. Is there any way or automatic process or tool by which I can just change one block and it will be applied to all others?
Code of boxes:
<div class="row gutters-40">
<div class="col-12 col-md-4 col-sm-4">
<div class="thumbnail">
<h4 class="service__title">Private limited Registration</h4>
<h2 style="font-weight: bold; color: purple; font-family: sans-serif;"><i class="fa fa-rupee"></i> 7500 Rs</h2>
<h5 class="doctype">Documents Required</h5>
<div class="docs">
<ul>
<li>Aadhar card & Pancard of Directors</li>
<li>Photo of Directors</li>
<li>Address Proof of Directors</li>
<li>Address Proof of Company address</li>
<li>Qualification & occupation of directors</li>
<li>Bank statement of Directors</li>
</ul>
</div><!--docs ends here-->
<div class="price_time">
<p class="service__paragraph" align="left" id="price"><i class="fa fa-info-circle"></i> Know More</p>
</div>
</div><!--Thumbnail ends here-->
</div>
<div class="col-12 col-md-4 col-sm-4">
<div class="thumbnail">
<h4 class="service__title">limited Liability partnership</h4>
<h5 class="doctype">Documents Required</h5>
<div class="docs">
<ul>
<li>Aadhar card of Directors</li>
<li>PAN Card of Directors</li>
<li>Passport size photo of Directors</li>
<li>Residential address proof of Director</li>
<li>Registered Office address proof</li>
<li>Appointment of auditor (ADT-1)</li>
</ul>
</div>
<div class="price_time">
<p class="service__paragraph" align="left" id="price"><i class="fa fa-rupee"></i> 7199</p>
<p class="service__paragraph" align="right" id="days"> <i class="fa fa-clock-o"></i> 10-15 days</p>
</div>
</div><!--Thumbnail ends -->
</div><!--box ends-->
</div> <!--row ends-->
As you can see my price is in last div inside p tag. I want it above h5 tag.
I have almost 80 such boxes. With multicursor and moving line up it will still take time.
I thought find and replace with regex can work but I can't evaluate how to do that. There is div class = docs is between these two elements which I want to swap, so I haven't figured out should such regex look like.

Well, I guess this is somewhat too custom task to find an out-of-box tool, so I'd suggest to write simple one of your own. Here's an outline:
open you page in browser
open dev tools Console, run a script to modify html
open dev tools Elements, copy the modified html bit
substitute the boxes part of html in your page with the modified one
if your html is modified also by some other JS, in step 1. use instead a dedicated html containing just the piece that's of interest.
Now, the script should do the following:
find all the boxes (document.querySelectorAll)
for each of them, do the necessary operations with elements, like
​ const elementToMove = ...
​ const destinationElement = ...
​ destinationElement.appendChild(elementToMove)
​ const elementToRemove = ...
​ elementToRemove.remove()

I want to increase the number of articles in the slider

I need some help in adding more articles to the Slider. Knowing that the number currently 3 articles. I needed to increase the number to 5 articles.
and this code in file slider.blade
<section class="mainslider commonslider">
<div id="imgslider" class="owl-carousel">
#foreach($sliderNews as $sn)
<div class="item">
<div class="sliderimg" style="background-image:url({{asset($sn->image)}});"></div>
<div class="slidertexts">
<div class="container">
<span >{{$sn->category->name}}</span>
<h1>{{$sn->title}}</h1>
<p>{!! str_limit( strip_tags($sn->article_html),100,'...') !!} </p>
شاهد
</div>//
</div>
</div>
#endforeach
</div>

i think from your controller you need to write a query and limit it to 5
$data['posts']=DB::table('posts')->limit(5)->get();
you can as well write an admin script to control the increment and decrement of the number of articles to be displayed any time.

Just changing this line
#foreach($articles->take(20)->random(3) as $sButtom)
To
#foreach($articles->take(20)->random(5) as $sButtom)

VueJS v-repeat only once

I currently use v-repeat to get my objects.
Inside i have one more v-repeat, but this should only repeat once. Is this possible?
<div v-repeat="companies">
{{name}}
<div v-repeat="image: images"> // should only repeat once
{{image.name}}
</div>
</div>

If each company has many images and you only want the first image to show, here is a solution:
<div v-repeat="company in companies">
{{company.name}}
<img v-attr="src: company.images[0].url">
{{company.images[0].name}}
</div>

I am not entirely sure if this is what you are after, but here goes:
<div v-repeat="company: companies">
{{company.name}}
<div>
<img v-attr="src: company.image.url"/>
{{company.image.name}}
</div>
</div>
this is assuming there is one image per company

Angular ng-click ordering

New to Angular, so far loving it. I've come so far in creating a list of thumbnails. I've added 3 sort buttons order the thumbnails by 3 different data values. All works great but to make it a little more less confusing for the user I would like to reset/turn of ordering for one data set when another order button is clicked. EG - https://jsfiddle.net/5wayfc4z/
From the fiddle you will notice when you click on country its becomes orederd by "country" when you then click on "a-z" it will sort the data by attraction but the "country" sorting will be still showing - to turn this off I need to click on country again. I only want to sort one field one at a time if that makes sense?
<div id="buttons" class="row">
<div class="col-sm-6 col-md-4">
a-z
</div>
<div class="col-sm-6 col-md-4">
Country/State
</div>
<div class="col-sm-6 col-md-4">
type of attraction
</div>
</div>
<article>
<div class="row">
<div ng-repeat="selfieObj in sticks | filter:searchAttraction | orderBy:predicate:reverse">
<div class="col-xs-12" ng-show="newGrouping($parent.sticks, 'country', $index);">
<h2 ng-show="villa">{{selfieObj.country}}</h2>
</div>
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img ng-src="{{selfieObj.mainImage}}" alt="{{selfieObj.attraction}}" title="{{selfieObj.attraction}}">
<div class="caption">
<h3>{{selfieObj.attraction}}</h3>
<p class="text-center">
{{selfieObj.answer}} {{selfieObj.info}}
</p>
</div>
</div>
</div>
</div>
</div>
</article>
EDIT:
https://jsfiddle.net/5wayfc4z/ new fiddle to take away the styling so it does not confuse.
To see my issue click on "country/state" - you will see the filter work by sorting by country and adding the country name. Then click on "a-z" this works BUT you will notice the filter for "country/state" is still in effect - in order to remove the "country/state" you have to click that filter button again.

The sorting seems to work fine in your fiddle, so is this just a visual issue?
Just remove the initial states from the buttons:
class="btn btn-primary btn-block"
instead of adding active or inactive by default.
I have forked your fiddle with the fix: fiddle

using mixitup plugin with a large number of items. how can i reduce filtering time?

I'm using the mixitup plugin to sort a large list.
Eventually there will be about ~740 entries in the list and I've got about 250 entries in there so far.
Sorting with the full list is very slow and I can only imagine it will get worse once all the entries are in.
Each entry follows this format:
<li class="mix grass def kalos" data-no="650" data-name="Chespin" data-hp="56" data-att="61" data-def="65" data-spa="48" data-spd="45" data-spe="38">
<div class="meta no">650</div>
<div class="meta name">
<div class="img_wrapper">
<img src="images/pokemon/650-chespin.png" onload="imgLoaded(this)"/>
</div>
<div class="titles">
<h2>Chespin</h2>
<p><img src="images/type/grass.png"></p>
</div>
</div>
<div class="meta ability"><ul><li><div title="#overgrow">Overgrow</div></li><li><div title="#bulletproof"><i>Bulletproof</i></div></li></ul></div>
<div class="meta ev"><ul><li>1 Defense</li></ul></div>
<div class="meta hp">56</div>
<div class="meta att">61</div>
<div class="meta def">65</div>
<div class="meta spa">48</div>
<div class="meta spd">45</div>
<div class="meta spe">38</div>
</li>
As you can see there is some repetitive data in that the first li class and data tags that correspond to data in the other divs. The items in the li class are used by the plugin to sort and filter while the content in the divs are what we see.
I'm thinking there's a javascript that can pull the numbers/data from within the li tag and automatically drop them into the respective divs but this would have to he done for each li item. Would this work in helping reduce the filtering time on the live site or just build time since I have to plug all these values in manually?
Plugin site: http://www.mixitup.io
Working site: http://www.color-mode.net/xy/pokedex.php