How to replace add display:block using javascript to display:flex?

Good day!
Please do not swear, that could be Google, etc.
There is a slider, which when pressed displays turns a UL list. The list is set to display:flex, and wanted to eventually save the grid structure. Now, when you click on add list to UL the script is inserted with display:block, which ultimately ruin the entire structure. How to fix the code so that flex block is inserted?
It is possible in this code to make the close button of the previous field and erase the data when you close, and below the "Add" button does not appear when all fields are filled.

In the end get: for block mesh crawling..
5e4b9ef7b8bd9809796229.png
The code itself:
<!-- Block 1-->
 <ul class="ingredient-b hiden_box">
 <li class="input-ingr">this is text</li>
 <li class="input-Col">this is text</li>
 <li class="select-ingredient">text Here</li>
 </ul> 
 <!-- Block 2-->
 <ul class="ingredient-b hiden_box">
 <li class="input-ingr">this is text</li>
 <li class="input-Col">this is text</li>
 <li class="select-ingredient">text Here</li>
 </ul> 
 <!-- Block 3-->
 <ul class="ingredient-b hiden_box">
 <li class="input-ingr">this is text</li>
 <li class="input-Col">this is text</li>
 <li class="select-ingredient">text Here</li>
 </ul> 
 <!-- Block 4-->
 <ul class="ingredient-b hiden_box">
 <li class="input-ingr">this is text</li>
 <li class="input-Col">this is text</li>
 <li class="select-ingredient">text Here</li>
 </ul> 
 <!-- Block 5-->
 <ul class="ingredient-b hiden_box">
 <li class="input-ingr">this is text</li>
 <li class="input-Col">this is text</li>
 <li class="select-ingredient">text Here</li>
 </ul> 

 <span class="btn-next_block btn">Add more</span>


.input_remove {display: none;}
 .ingredient-b {
 display: flex;
 justify-content: space-between;
 position: relative;
 list-style: none;
 margin: 0;
 padding: 0;}
 .ingredient-b li {
 width:30%;}


// SPOILER BLOCKS INGREDIENTS 
 $('.btn-next_block ').click(function() {
 // show the hidden first order
$('.ingredient b:hidden').eq(0).show();
 // hide button if no hidden items
 $('.ingredient b:hidden').length<1 ? $('.btn-next_block').hide() : false;});

 // Delete class from the parent if (input - value"") is filled and does not hide the spoiler to show all the ingredients when editing
 $('.input-the input ingr').each(function() {
 $(this).closest('.hiden_box').toggleClass('input_remove', !this.value);
});
April 7th 20 at 15:38
1 answer
April 7th 20 at 15:40
.show() executes .css('display', 'block');, hence you can do this: .css('display', 'flex');instead .hide:
.css('display', 'none');. But it is better to make additional class and Taglit it.
Thank you! - royal_Simonis commented on April 7th 20 at 15:43

Find more questions by tags JavaScriptjQuery