<p data-letter="2">П</p>
<p data-letter="0">Ж</p>
<p data-letter="3">А</p>
<p data-letter="1">О</p>const word = $('[data-letter]')
.sort((a, b) => $(a).data('letter') - $(b).data('letter'))
.text();
// или
const word = Array
.from(document.querySelectorAll('[data-letter]'))
.reduce((acc, n) => (acc[n.dataset.letter] = n.innerText, acc), [])
.join('');
<div class="container">
<div class="a"></div>
<div class="b"></div>
</div>.container {
width: 500px;
height: 500px;
position: relative;
}
.a {
display: none;
width: 500px;
height: 500px;
background-color: black;
clip-path: polygon(10% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 10%);
position: absolute;
top: 0;
left: 0;
}
.b {
width: 494px;
height: 494px;
background-color: yellow;
position: absolute;
top: 3px;
left: 3px;
clip-path: polygon(10% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 10%);
}
.container:hover .a {
display: block;
}
<div class="wrap">
<label for="txt">Имя<span>*</span></label>
<input type="text" id="txt">
</div>.wrap{
position: relative;
}
label{
position: absolute;
left: 10px;
top: 5px;
color: #aaa;
}
span{
color: red;
}
order:nth-child( 1 ){...}
order:nth-child( 2 ){...}
order:nth-child( 3 ){...}
order:nth-child( 4 ){...}
order:nth-child( 5 ){...}
order:nth-child( 6 ){...}
order:nth-child( 7 ){...}