JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 <div class="mb-3"   id="dropdown-container-edit">
                            <div class="line" style="margin-top: 15px;display: flex;min-width: 329px;">
                                <div style="float:left;display: flex; flex-direction: column;width: 10%;">
                                    <label for="select-group" class="form-label">Select Status</label>
                                </div>
                            </div>
         
                            <div class="line" style="margin-top: 15px;display: flex;min-width: 329px;">
                                <div style="float:left;display: flex; flex-direction: column;width: 10%;">
                                    <select class="select-group" name="status[0]">
                                        <option value="" data-id="">Select Status</option>
                                        <option value="0" data-id="" selected>Status_1</option>
                                        <option value="1" data-id="" >Status_2</option>
                                        <option value="2" data-id="" >Status_3</option>   
                                    </select>
                                </div>
                                <div style="float:left; display: flex; flex-direction: column; width: 90%;">
                                    <input type="text" class="input-field status-input" name="status-input[0]" style="margin-left: 5px;" value="status">
                                </div>
                             
                                <div class="arrows" style="display: inherit;margin-left: 10px;margin-top: 3px; ">
                                    <i class="fa fa-chevron-circle-up fa-2x move-up-button" data-index="0" style="margin-right: 5px;"></i>
                                    <i class="fa fa-chevron-circle-down fa-2x move-down-button"...

JavaScript

$(document).ready(function () {

  function moveUp(index) {
    if (index === 0) return;
    var $currentItem = $('[name="status[' + index + ']"]').closest('.line');
    var $prevItem = $('[name="status[' + (index - 1) + ']"]').closest('.line');
    $currentItem.insertBefore($prevItem);
    updateIconsVisibility();
  }

  function moveDown(index) {
    var $currentItem = $('[name="status[' + index + ']"]').closest('.line');
    var $nextItem = $('[name="status[' + (index + 1) + ']"]').closest('.line');
    $nextItem.insertAfter($currentItem);
    updateIconsVisibility();
  }

  function updateIconsVisibility() {
    $('.line').each(function (index, element) {
      var $line = $(element);
      var $arrows = $line.find('.arrows');
      var $upIcon = $arrows.find('.fa-chevron-circle-up');
      var $downIcon = $arrows.find('.fa-chevron-circle-down');

      if (index === 0) {
        $upIcon.hide();
        $downIcon.show();
      } else if (index === $('.line').length - 1) {
        $upIcon.show();
        $downIcon.hide();
      } else {
        $upIcon.show();
        $downIcon.show();
      }
    });
  }

  $(document).on('click', '.move-up-button', function() {
    var index = $(this).data('index');
    moveUp(index);
  });

  $(document).on('click', '.move-down-button', function() {
    var index = $(this).data('index');
    moveDown(index);
  });

  updateIconsVisibility();
});