JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<section id="first_section">
<div class="room_details_first col-md-12" id="first_order">   
      <div class="col-md-3">
      <input id="food" type="text" placeholder="Food items" name="others_food_items[]" data-view-id="#location"/>
     </div>
      <div class="col-md-3">
      <input id="hotel_name" type="text" placeholder="Hotel Name" name="others_hotel[]"/>
      </div>
       <div class="col-md-3">
       <input id="hotel_price" type="text" placeholder="Hotel price" name="others_hotel_price[]"/>
       </div>
     <div class="col-md-3">
        <input id="customer_price" type="text" placeholder="Customer Price" name="others_client_price[]"/>
       </div>
       </div>
      <button id="dummy">Submit</button>
      </section>
      <section>
        <div id="first_order">123</div>
      </section>

JavaScript

var food = document.querySelector('#food');
var hotel_name = document.querySelector('#hotel_name');
var hotel_price = document.querySelector('#hotel_price');
var customer_price = document.querySelector('#customer_price');
$('#first_order').html('output');
$('#dummy').on('click', function(){
	$('#first_section').hide();
  var output = '<div class="room_details_first col-md-12" id="first_order">';
  output += '<div class="col-md-3">' + food.value + '</div>';
  output += '<div class="col-md-3">' + hotel_name.value + '</div>';
  output += '<div class="col-md-3">' + hotel_price.value + '</div>';
  output += '<div class="col-md-2">' + customer_price.value + '</div>';
  output += '<div class="col-md-1" ><a href="javascript:void(0)" id="removeOtherOrder"><i class="fa fa-remove"></i></a></div>';
  //$('#first_order').html(output);
});

function add_others_order(){
  var  output="";
 output+= '<div class="room_details_first col-md-12" id="first_order">';   
 output+='<div class="col-md-3"><input type="text" placeholder="Food items"   name="others_food_items[]" data-view-id="#location"/></div>';
  output+='<div class="col-md-3"> <input type="text" placeholder="Hotel Name" name="others_hotel[]"/> </div>';
  output+='<div class="col-md-3"><input type="text" placeholder="Hotel price" name="others_hotel_price[]"/></div>';
  output+='<div class="col-md-2"> <input type="text" placeholder="Customer Price" name="others_client_price[]"/></div>';
   output+='<div class="col-md-1" ><a href="javascript:void(0)" id="removeOtherOrder"><i class="fa fa-remove"></i></a></div>';
        output+='</div>';
   $('#first_order').after(output);
  }