JSFiddle - React, Tailwind, and code Playground

by synz izynz

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">
<!-- <input type="radio" name="venta" id="venta_1" value="1000"> -->
        <label class="radio-inline mr10">
            <input type="radio" name="venta" id="venta_2" value="nochange"> Test to show that This Option wont change even its name same with the option in modal.
        </label>
        <br>
        <span class="venta0">120</span> - 1st Value For Option (example) <br>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#escoger">
  Launch demo modal
</button>

<div id="escoger" class="modal fade" 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 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">

        <label class="radio-inline mr10">
            <input type="radio" name="venta" id="venta_0" value="venta_0 value">1
        </label>
        <label class="radio-inline mr10">
            <input type="radio" name="venta" id="venta_1" value="venta_1 value">2
        </label>
        <label class="radio-inline mr10">
            <input type="radio" name="venta" id="venta_2" value="venta_2 value">3
        </label>
        <label class="radio-inline mr10">
            <input type="radio" name="venta" id="venta_3" value="venta_3 value">4
        </label>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn...

CSS

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

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

JavaScript

$('#escoger').on('shown.bs.modal', function () {

		var venta0 = $(".venta0").text(); // Test value (random). Change it back according to your code later.
		var venta1 = Math.floor((Math.random() * 100)); // Test value (random). Change it back according to your code later.
		var venta2 = Math.floor((Math.random() * 100)); // Test value (random). Change it back according to your code later.
		var venta3 = Math.floor((Math.random() * 100)); // Test value (random). Change it back according to your code later.
		var vt 		= $(this);
		var vt0 	= $('input[name="venta"]:eq(0)',this); // Set target input with their own index (eq).
		var vt1 	= $('input[name="venta"]:eq(1)',this); // Set target input with their own index (eq).
		var vt2 	= $('input[name="venta"]:eq(2)',this); // Set target input with their own index (eq).
		var vt3 	= $('input[name="venta"]:eq(3)',this); // Set target input with their own index (eq).

		vt0.val(venta0).prop('checked',true) // Set the value
		.closest("label").html(function(){ // Customize/Set again the html in label. Because this input inside the label and its text value
			return [$("input",this),$("input",this).val()]; // Return the input in this label with its text value back into html
		});
		vt1.val(venta1) // Set the value
		.closest("label").html(function(){ // Customize/Set again the html in label. Because this input inside the label and its text value
			return [$("input",this),$("input",this).val()]; // Return the input in this label with its text value back into html
		});
		vt2.val(venta2) // Set the value
		.closest("label").html(function(){ // Customize/Set again the html in label. Because this input inside the label and its text value
			return [$("input",this),$("input",this).val()]; // Return the input in this label with its text value back into html
		});
		vt3.val(venta3) // Set the value
		.closest("label").html(function(){ // Customize/Set again the html in label. Because this input inside the label and its text...