Показать скрытый div по порядку

Question

У меня есть этот код:

КОД

$('button').click(function(){
    var a = $(this).text();
    $('.'+a).show();
    $('.'+a).css("order", "1");
    
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <div class='1' style='display:none'><input type='text' value='1'></input>
  </div>
  <div class='2' style='display:none'><input type='text' value='2'></input>
  </div>
  <div class='3' style='display:none'><input type='text' value='3'></input>
  </div>

  <button>1</button>
  <button>2</button>
  <button>3</button>

Мне нужно, чтобы они были в том порядке, в котором я нажимаю кнопку. Я пытался использовать .css('order','1'), но, похоже, он не работает

Answer 1

Поскольку вы используете jQuery, вы можете создать оболочку и использовать appendTo вместо того, чтобы полагаться на свойство order.

$('button').click(function() {
  var a = $(this).text();
  $('.' + a).show();
  $('.' + a).appendTo('.wrapper');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="wrapper">
  <div class='a' style='display:none'><input type='text' value='1'>
  </div>
  <div class='b' style='display:none'><input type='text' value='2'>
  </div>
  <div class='c' style='display:none'><input type='text' value='3'>
  </div>
</div>

<button>a</button>
<button>b</button>
<button>c</button>

Answer 2

https://jsfiddle.net/fxsa3e85/3/

$( 'button' ).click(function() {

  console.log( $( ".div[style*='display: unset']" ).length );


  var a = $( this ).text();
  $( '.' + a ).css( "display", "unset" );
  $( '.' + a ).css( "order", $( ".div[style*='display: unset']" ).length + 1 );

} );

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="orders" style="display:grid">
  <div class="div 1" style="display: none"><input type="text" value="1"></div>
  <div class="div 2" style="display: none"><input type="text" value="2"></div>
  <div class="div 3" style="display: none"><input type="text" value="3"></div>
</div>


<button>1</button>
<button>2</button>
<button>3</button>

Answer 3

Лучший способ добиться чего-то подобного - использовать метод .append() из JQuery:

$('button').click(function() {
  var a = $(this).text();

  $('.inputs').append($(`<input type='text' value='${a}'></input>`))
});

.inputs {
  display: flex;
  flex-direction: column;
}

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

<div class="inputs"></div>

<button>1</button>
<button>2</button>
<button>3</button>