JSFiddle - React, Tailwind, and code Playground

by Dmitri Ganenco

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<table class="table table-hover small-text" id="tb">
  <tr class="tr-header">
    <th>Vehicle Number</th>
    <th>Rate</th>
    <th>Driver Name<a data-toggle="modal" data-target="#contact-modal-2">
        <span class="glyphicon glyphicon-plus-sign"></span>
      </a> </th>
    <th><a href="javascript:void(0);" style="font-size:18px;" id="addMore" title="Add More Person"><span class="glyphicon glyphicon-plus"></span></a></th>
  </tr>
  <tr>
    <td>
      <select name="vehicle_id[]" class="form-control">
        <option value="" selected>Select Vehicle</option>
        <option value="les-808">LES-808</option>
        <option value="dsg-852">DSG-852</option>
      </select>
    </td>
    <td>
      <div class="inputContainer"></div>
    </td>
    <td>
      <select name="driver_id[]" class="form-control">
        <option value="" selected>Select Driver</option>
        @foreach($driver_detail as $driver_detail)
        <option value="{{$driver_detail->id}}">{{$driver_detail->name}}</option>
        @endforeach
      </select>
    </td>

    <td><a href='javascript:void(0);' class='remove'><span class='glyphicon glyphicon-remove'></span></a></td>
  </tr>
</table>

CSS

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

JavaScript

$("select[name='vehicle_id[]']").change(function() {
  var vehicle = $(this).val();
  const $row = $(this).closest('tr');
  $row.find(".inputContainer").each(function() {
    $(this).find('option').not(':first').remove();
  });

  $row.find(".inputContainer").find('.rate').remove();
  const $input = $('<input />', {
    class: 'form-control rate',
    name: 'rate[]',
    id: 'rate_id',
    type: 'text',
    readonly: 'readonly',
    value: 'VALUE FROM DB'
  });


  // here we append it into container
  $row.find('.inputContainer').append($input);
});