I have 5 div elements I want to show elements one by one on the click function but it does not work, you can also give another solution to do this.

another thing I want display property none to flex in my div element

btns = document.getElementsByClassName("saveBtn");
btns.onclick = function show() {
    for (var i = 0; i <= 4; i++) {
        var id = '#myDIV' + i;
        var element = document.getElementById(id);
        var setting = element.style.display;

        if (setting == 'none') {
            element.style.display = 'flex';
            break;
        }
    }
}
<button class="saveBtn" style="background-color: #0b5ed7; padding: 10px; border-radius: 10px;cursor: pointer">
    <i class="fa fa-plus"> Add More</i>
</button>
<div class="col-sm-6" style="display: flex; margin-top: 24px">
    <input type="float" class="form-control form-control-user" placeholder="Cell Quantity">
    <input type="float" class="form-control form-control-user" placeholder="Cell Price">
</div>
<div class="col-sm-6" style="display: none" id="myDIV0">
    <input type="float" class="form-control form-control-user" placeholder="Cell Quantity">
    <input type="float" class="form-control form-control-user" placeholder="Cell Price">
</div>
<div class="col-sm-6" style="display: none" id="myDIV1">
    <input type="float" class="form-control form-control-user" placeholder="Cell Quantity">
    <input type="float" class="form-control form-control-user" placeholder="Cell Price">
</div>
<div class="col-sm-6" style="display: none" id="myDIV2">
    <input type="float" class="form-control form-control-user" placeholder="Cell Quantity">
    <input type="float" class="form-control form-control-user" placeholder="Cell Price">
</div>
<div class="col-sm-6" style="display: none" id="myDIV3">
    <input type="float" class="form-control form-control-user" placeholder="Cell Quantity">
    <input type="float" class="form-control form-control-user" placeholder="Cell Price">
</div>

1

The problem is with this line btns.onclick = function show() which is btns[0].onclick = function() {. so you need to use addEventListener.
you need to also remove # from making of id.

btns = document.getElementsByClassName("saveBtn");
btns[0].addEventListener('click', function() {
  for (var i = 0; i <= 4; i++) {
    var id = 'myDIV' + i;
    var element = document.getElementById(id);
    var setting = (element) ? element.style.display : '';

    if (setting == 'none') {
      element.style.display = 'flex';
      break;
    }
  }
})
<button class="saveBtn" style="background-color: #0b5ed7; padding: 10px; border-radius: 10px;cursor: pointer">
<i class="fa fa-plus"> Add More</i>
</button>
<div class="col-sm-6" style="display: flex; margin-top: 24px">
  <input type="float" class="form-control form-control-user" placeholder="Cell Quantity">
  <input type="float" class="form-control form-control-user" placeholder="Cell Price">
</div>
<div class="col-sm-6" style="display: none" id="myDIV0">
  <input type="float" class="form-control form-control-user" placeholder="Cell Quantity">
  <input type="float" class="form-control form-control-user" placeholder="Cell Price">
</div>
<div class="col-sm-6" style="display: none" id="myDIV1">
  <input type="float" class="form-control form-control-user" placeholder="Cell Quantity">
  <input type="float" class="form-control form-control-user" placeholder="Cell Price">
</div>
<div class="col-sm-6" style="display: none" id="myDIV2">
  <input type="float" class="form-control form-control-user" placeholder="Cell Quantity">
  <input type="float" class="form-control form-control-user" placeholder="Cell Price">
</div>
<div class="col-sm-6" style="display: none" id="myDIV3">
  <input type="float" class="form-control form-control-user" placeholder="Cell Quantity">
  <input type="float" class="form-control form-control-user" placeholder="Cell Price">
</div>

I have created a runnable snippet so that you can refer to it.

Did some changes to your script logic. Instead of running a for loop. You can have a currentIndex set to 0 and increment as you add a new div. Also to solve your flex issue you can wrap all your div inside a wrapper and give them display:flex and flex-direction:column so that they appear one below the other.

let currentIndex = 0;
const saveBtn = document.querySelector('.saveBtn');
saveBtn.addEventListener('click', show);
function show() {
  const divToShow = document.querySelector(`#myDIV${currentIndex}`);
  if (divToShow) {
    divToShow.style.display = 'flex';
    currentIndex++;
  }
}
.wrapper {
  display: flex;
  flex-direction: column;
}
 <button class="saveBtn" style="background-color: #0b5ed7; padding: 10px; border-radius: 10px;cursor: pointer">
    <i class="fa fa-plus"> Add More</i>
</button>
<div class="wrapper">
<div class="col-sm-6" style="display: flex; margin-top: 24px">
    <input type="float" class="form-control form-control-user" placeholder="Cell Quantity">
    <input type="float" class="form-control form-control-user" placeholder="Cell Price">
</div>
<div class="col-sm-6" style="display: none" id="myDIV0">
    <input type="float" class="form-control form-control-user" placeholder="Cell Quantity">
    <input type="float" class="form-control form-control-user" placeholder="Cell Price">
</div>
<div class="col-sm-6" style="display: none" id="myDIV1">
    <input type="float" class="form-control form-control-user" placeholder="Cell Quantity">
    <input type="float" class="form-control form-control-user" placeholder="Cell Price">
</div>
<div class="col-sm-6" style="display: none" id="myDIV2">
    <input type="float" class="form-control form-control-user" placeholder="Cell Quantity">
    <input type="float" class="form-control form-control-user" placeholder="Cell Price">
</div>
<div class="col-sm-6" style="display: none" id="myDIV3">
    <input type="float" class="form-control form-control-user" placeholder="Cell Quantity">
    <input type="float" class="form-control form-control-user" placeholder="Cell Price">
</div>
</div>

This is NOT the recommended approach to have add more feature, however I am fixing your code.

function show() {
    for (var i = 0; i <= 4; i++) {
        var id = 'myDIV' + i;
        var element = document.getElementById(id);
        var setting = element?.style?.display;

        if (setting == 'none') {
            element.style.display = 'flex';
            break;
        }
    }
}
<button class="saveBtn" onclick="show()" style="background-color: #0b5ed7; padding: 10px; border-radius: 10px;cursor: pointer">
    <i class="fa fa-plus"> Add More</i>
</button>

btns = document.getElementById("saveBtn");
btns.onclick = function() {
    for (var i = 0; i <= 3; i++) {
        var id = '#myDIV'+i;
        var element = document.querySelector(id);
        var setting = element.style.display;
        if (setting == 'none') {
            element.style.display = 'flex';
        }
    }
}
<button class="saveBtn" style="background-color: #0b5ed7; padding: 10px; border-radius: 10px;cursor: pointer" id="saveBtn">
    <i class="fa fa-plus"> Add More</i>
</button>
<div class="col-sm-6" style="display: flex; margin-top: 24px">
    <input type="float" class="form-control form-control-user" placeholder="Cell Quantity">
    <input type="float" class="form-control form-control-user" placeholder="Cell Price">
</div>
<div class="col-sm-6" style="display: none" id="myDIV0">
    <input type="float" class="form-control form-control-user" placeholder="Cell Quantity">
    <input type="float" class="form-control form-control-user" placeholder="Cell Price">
</div>
<div class="col-sm-6" style="display: none" id="myDIV1">
    <input type="float" class="form-control form-control-user" placeholder="Cell Quantity">
    <input type="float" class="form-control form-control-user" placeholder="Cell Price">
</div>
<div class="col-sm-6" style="display: none" id="myDIV2">
    <input type="float" class="form-control form-control-user" placeholder="Cell Quantity">
    <input type="float" class="form-control form-control-user" placeholder="Cell Price">
</div>
<div class="col-sm-6" style="display: none" id="myDIV3">
    <input type="float" class="form-control form-control-user" placeholder="Cell Quantity">
    <input type="float" class="form-control form-control-user" placeholder="Cell Price">
</div>

1