JSFiddle - React, Tailwind, and code Playground

by Ali Soltani

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="table-responsive">

  <table class="table table-striped table-bordered">

    <tr>
      <td>
        <div class="input-prepend">
          <span class="add-on">$</span>
          <span class="uneditable-input input-small currency-format">100</span>
        </div>
      </td>
      <td>
        <a data-toggle="modal" data-id="1" data-action='accept' class="btn btn-small btn-primary">Accept</a>
        <a data-toggle="modal" data-id="1" data-action='discuss' class="btn btn-small btn-default">Discuss</a>
      </td>

    </tr>


    <tr>
      <td>
        <div class="input-prepend">
          <span class="add-on">$</span>
          <span class="uneditable-input input-small currency-format">200</span>
        </div>
      </td>
      <td>
        <a data-toggle="modal" data-id="2" data-action='accept' class="btn btn-small btn-primary">Accept</a>
        <a data-toggle="modal" data-id="2" data-action='discuss' class="btn btn-small btn-default">Discuss</a>
      </td>

    </tr>

  </table>
</div>

<div id="acceptModel" class="modal fade in" role="dialog">
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4>accept_damage</h4>
      </div>
      <div class="modal-body" style="max-height: 500px;">

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary">Ok</button>
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancle</button>
      </div>
    </div>
  </div>
</div>

JavaScript

var damage_items = JSON.parse('{"damage1": {"id": "1","estimated_total_repair_cost": "1000","damage_location_name": "location 1"},"damage2": {"id": "2","estimated_total_repair_cost": "2000","damage_location_name": "location 2"}}');
$('a[data-toggle=modal]').click(function() {
  if (typeof $(this).data('id') !== 'undefined') {

    data_id = $(this).data('id');
    action = $(this).data('action');
    setModelContent($(this), action, data_id);

    $('#acceptModel').modal('show');

  }
});

function setModelContent(modal, action, data_id) {

  if (action == 'accept') {
    // based on action need to set  the body of model pop up
  }

  // Get damage item by data_id
  let damage_item = Object.entries(damage_items).filter(item => item[1].id == data_id);

  // Creating dynamically bootstrap elements and setting value of inputs by damage_item
  let fisrtLabel = $(document.createElement('label')).text('Cost:');
  let fistInput = $(document.createElement('input')).addClass('form-control').val(damage_item[0][1].estimated_total_repair_cost);

  let firstCol6 = $(document.createElement('div')).addClass('col-sm-6')
    .append(fisrtLabel)
    .append(fistInput);

  let secondLabel = $(document.createElement('label')).text('location name:');
  let secondInput = $(document.createElement('input')).addClass('form-control').val(damage_item[0][1].damage_location_name);

  let secondCol6 = $(document.createElement('div')).addClass('col-sm-6')
    .append(secondLabel)
    .append(secondInput);


  let formGroup = $(document.createElement('div'))
    .addClass('form-group')
    .append(firstCol6)
    .append(secondCol6);

  // Clearing modal-body and filling it by new elements
  $('#acceptModel').find('.modal-body').html("").append(formGroup);

}